AJAX表格发布不起作用

Question

我已经尝试了至少3种方法，每次我尝试使用ajax获取要发布的表单时，页面总是会重新加载，并且什么都不会提交。

它甚至不返回成功或错误-似乎甚至没有调用该函数。

这是代码，在此先感谢。

HTML：

<form id='sig_up' name='sig_up' style='min-width:170px'>
    <textarea id='sig' class='custom-scroll' style='max-height:180px;'></textarea>
    <br>
    <input class='btn btn-primary btn-sm' type='submit' /> 
</form>

jQuery / AJAX：

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

        $.ajax({
        url:'update_sig.php',
        data:$(this).serialize(),
        type:'POST',
        success:function(data){
            $.smallBox({
            title : "Signature Updated",
            content : "Your signature has been successfully updated.",
            color : "#296191",
            //timeout: 8000,
            icon : "fa fa-bell swing animated"
        });

        },
        error:function(data){



        }
        });
        e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===
});

Answer 1

您是否尝试过stopImmediatePropagation （）？

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

        e.preventDefault();
        e.stopImmediatePropagation();

        $.ajax({
            url:   'update_sig.php',
            data:  $(this).serialize(),
            type:  'POST',

            success:function(data){
              console.log("Success");
            },

            error:function(data){
              console.error("Error");
            }
        });
    });

Answer 2

好吧，要发送该表单，我会将表单的处理程序附加到文档中（尽管根据文档无关紧要），请首先编写preventDefault以避免在发送任何表单之前发送表单（尽管我在最后尝试了它） ，其结果完全相同，必须查看此功能）。

因此，我所做的另一件重要的事情是更改表单内部的范围，这才是真正的答案。 如果在AJAX内使用$（this），则是指AJAX jQuery处理程序，而不是表单，我对其进行了更改以显示其变化。 我还添加了一个错误console.log以检查什么是错误的，以防万一。 我尝试了下面的代码，它在我的本地主机中发送了呼叫。

  $(document).on('submit', '#sig_up', function(e) {
        e.preventDefault();

        var $form = $(this);

        $.ajax({
            url:  'update_sig.php',
            data: $form.serialize(),
            type: 'POST',
            success:function(data){
                console.log('ok');
//              $.smallBox({
//                  title : "Signature Updated",
//                  content : "Your signature has been successfully updated.",
//                  color : "#296191",
//                  //timeout: 8000,
//                  icon : "fa fa-bell swing animated"
//              });
            },
            error:function(data){
                console.log(data);
            }
        });
});

Answer 3

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

         e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===

         var that = this;

             $.ajax({
             url:'update_sig.php',
             data:$(that).serialize(),
             type:'POST',
             success:function(data){
                 $.smallBox({
                    title : "Signature Updated",
                    content : "Your signature has been successfully updated.",
                    color : "#296191",
                    //timeout: 8000,
                    icon : "fa fa-bell swing animated"
                });
            },
            error:function(data){



           }
        });
    });