我已成功将表单加载到<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....
});