javascript - AJAX/jQuery 表单提交 shoutbox

Question

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

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();
  });
});