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

送信ボタンをクリックすると、まさにそれが実行されます。フォームが送信されます。フォームの送信をAJAXPOSTリクエストに置き換える場合は、そのイベントのデフォルトの動作を防ぐことで、フォームの送信（およびページの再読み込み）を停止する必要があります。

return false;これを行うには、送信イベントハンドラーにバインドされたコールバック関数の最後で呼び出すか、イベントへの参照をコールバック関数に渡して呼び出しますe.preventDefault()（ここで、はイベントを参照しますe）。

2つのメソッドの主な違いはreturn false、jQueryコールバック関数では、イベントのバブリングも防止することです。この場合、それは実際には大したことではありません。

于 2012-07-25T12:15:54.933 に答える