3

我正在尝试使用 Ajax 和 jQuery 创建一个帖子。

但它不起作用。它只是刷新当前页面。

HTML：

<form name="update_text_post" action="" id="update_text_post" method="post">
    <textarea name="textbox" class="textbox" maxlength="600"></textarea>
    <input type="submit" name="submit" value="Update" class="update_post_submit">
</form>

jQuery :

$('#update_text_post').submit(function(e) {
   e.preventDefault();
    $.ajax({
        type: "POST",
        url: "post_ajax2.php",
        data: dataString,
        cache: false,
        success: function (html) {
            $("#wallwrap").prepend(html);
            close_box();
            $('#update_text_post').resetForm();
        }
    });
 return false
});

e.preventDefault(); 也不能正常工作..它实际上甚至没有执行 MYSQL 查询。似乎它甚至没有发送表单或定位 post_ajax2.php 文件。

4

6 回答 6

2

您需要使用.preventDefault()页面重新加载来停止默认的表单提交行为。

$(function() {
    $('#update_text_post').submit(function(e) {
        e.preventDefault(); // e.preventDefault() for prevent form submisson with page reload
        $.ajax({
            type: "POST",
            url: "post_ajax2.php",
            data: dataString,
            cache: false,
            success: function(html) {
                $("#wallwrap").prepend(html);
                close_box();
                $('#update_text_post').resetForm();
            }
        });

    });
});

function afterSuccess() {
    $('#update_text_post').resetForm(); // reset form
    close_box();
}
于 2012-07-25T12:14:12.627 回答
1 
// 1. you missed $ here, so it will not be a dom ready callback.
// your case is just define a function, and without executing it.
$(function () {
      $('#update_text_post').submit(function (e) {
          // 2. you need to prevent the default submit event.
          e.preventDefault(); 
          $.ajax({
              type: "POST",
              url: "post_ajax2.php",
              data: dataString,
              cache: false,
              success: function (html) {
                  $("#wallwrap").prepend(html);
                  close_box();
                  $('#update_text_post').resetForm();
              }
          });
      });
  });

  function afterSuccess() {
      $('#update_text_post').resetForm(); // reset form
      close_box();
  }
于 2012-07-25T12:18:16.947 回答
0

您必须停止提交按钮的默认行为（表单发布）。否则表单将再次提交，您将再次看到页面加载（您不会注意到 ajax 为您的页面带来的更改 - 一些部分页面更新） . 您可以使用preventDefault函数来执行此操作。

$(function(){
   $('#update_text_post').submit(function(e) {
     e.preventDefault();  // prevent the default submit behaviour
       $.ajax({
           type: "POST",
           url: "post_ajax2.php",
           data: dataString,
           cache: false,
           success: function(html)
           {
               $("#wallwrap").prepend(html);
               close_box();
               $('#update_text_post').resetForm();
           }
       });      
     });
});
于 2012-07-25T12:14:35.823 回答
0

你必须调用e.preventDefault();你的函数来阻止表单提交。

$('#update_text_post').submit(function(e) {
      // prevent form submit
      e.preventDefault();

      $.ajax({
               type: "POST",
               url: "post_ajax2.php",
               data: dataString,
               cache: false,
               success: function(html)
               {
                  $("#wallwrap").prepend(html);
                  close_box();
                  $('#update_text_post').resetForm();
               }
      });
});
于 2012-07-25T12:15:01.830 回答
0

添加return false.

$('#update_text_post').submit(function(e) {
    $.ajax({
     ...
    })
    return false;
});
于 2012-07-25T12:15:06.687 回答
0

单击提交按钮就是这样做的 - 它提交表单。如果您想用 AJAX POST 请求替换表单提交，则需要通过阻止该事件的默认行为来阻止表单也被提交（并因此重新加载页面）。

您可以通过return false;在绑定到提交事件处理程序的回调函数的末尾调用，或者通过将事件的引用传递给回调函数并调用e.preventDefault()（其中e引用事件）来执行此操作。

这两种方法的主要区别在于return false，在 jQuery 回调函数中，还会阻止事件冒泡。在这种情况下，这并不是什么大问题。

于 2012-07-25T12:15:54.933 回答