我已成功將表單加載到<div>使用 jQuery $.Ajax 的元素。 我需要知道如何使用 jQuery Ajax 提交該表單

Question

我已經使用 jQuery 的.on()進行事件委托，並為動態加載的表單設置了一個“提交”事件處理程序，例如

<script>

    $(document).on('submit','#my_form_id',function(e){


                    e.preventDefault();
                    e.stopPropagation();


                    $.ajax({

                           url:$this.href,
                           type:"POST",
                           data: $('#my_form_id').serialize(),
                           dataType: "html"

                     }).done(function(update_result){

                         $('#id_of_div_that_will_hold_the result').html(update_result);  
                     });

                     return false;

      });



  </script>  

但它不起作用，因為表單是直接提交而不是異步提交的。

另外，上面的腳本應該放在主頁面的什么地方，或者放在包含動態加載表單的 HTML 代碼的頁面中？ 我問這個，因為腳本似乎沒有被調用

任何一般的簡短示例都會有所幫助並受到高度贊賞。 我無法在這里提供代碼，因為它在使用 codeigniter 的 MVC 架構中太長了。

Answer 1

您可以執行以下操作來發布表單：

$("#my_form_id").submit(function (e) {
    e.preventDefault();
    $.post($(this).attr("action"), $(this).serialize(), function (data) {
      // put any code handling return values here
    });
});

$.submit 的工作方式與$.on('submit')相同，但更易於閱讀和輸入。 $(this).serialize()函數將所有表單數據轉換成字符串提交給服​​務器。

Answer 2

您應該停止觸發默認事件處理程序（提交）。

$(document).on('submit', '#my_form_id', function(e){ 
    e.preventDefault();
    ajax form submision code goes here....
});