AJAX / jQuery表单提交shoutbox

Question

我正在创建一个简单的shoutbox，其中用户提交一个表单，表单通过PHP请求传递给jQuery，他们的评论显示在墙上的提要上。

PHP / SQLite部分运行良好，但我在使用AJAX表单时遇到了问题。当我单击提交(post)时，它会在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

尝试不带" action“的表单--因为目前您实际上是通过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()

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