Question

我正在创建一个简单的shoutbox，用户提交一个通过jQuery AJAX请求传递给PHP的表单，并且他们的注释显示在墙上的Feed中。

PHP / SQLite部分工作正常，但我遇到了AJAX表单的问题。当我点击提交（发布）时，它会在shout.php正确处理PHP，但导航窗口也会跳转到shout.php，当它应保留在原始页面上时...

HTML表单：

<form id="newPost" action="shout.php" method="post">

Name: <input type="text" id="name" name="name" />

Message: <textarea name="message" id="message"></textarea>

<input type="submit" id="submit" value="Submit" />

</form>

和jQuery：

$("#newPost").submit(function() {


var name = $("#name").val();
var message = $("#message").val();
var data    = 'name='+ name +'&message='+ message;


$.ajax({
    type: "POST",
    url: "shout.php",
    data: data,
    success: function(html) {

        console.log(html);

            refresh_shoutbox();
    }
    });
return false;
});

Answer 1

以下是我对更好的可维护性的建议：

$(document).ready(function () {
  $("#newPost").submit(function(e) {
    $.post({
        $('#newPost').attr('action')
      , $('#newPost').serialize()
      , function(html) {
          console.log(html);
          refresh_shoutbox();
        }
    });
    e.preventDefault();
  });
});

Answer 2

尝试没有“操作”的表单 - 因为目前您实际上是通过ajax提交并通过其action属性正常提交表单：

<form id="newPost" action="" method="post">

Answer 3

更改

<input type="submit" id="submit" value="Submit" />

到

<input type="button" id="submit" value="Submit" />

然后更改

$("#newPost").submit(function()

到

$("#newPost").click(function()

输入提交类型实际上会通过新的http请求提交表单，这就是为什么你的页面会在之后的“shout.php”。

Answer 4

$("#newPost").submit(function(e) {

    e.preventDefault(); //just add this

    // your rest code
    var name = $("#name").val();
    var message = $("#message").val();
    var data    = 'name='+ name +'&message='+ message;


    $.ajax({
        type: "POST",
        url: "shout.php",
        data: data,
        success: function(html) {

            console.log(html);

                refresh_shoutbox();
        }
        });
    return false;


    });

这将阻止默认提交事件，因此导航窗口保留在同一页面上。

AJAX / jQuery表单提交shoutbox

4 个答案: