jQuery实现Ajax方式提交表单

提交表单一般通过同步的方式提交，提交后页面刷新或跳转到新页面来显示服务器端返回的处理结果。如果表单提交后有另外的操作或业务需求需要还在这个页面上显示或处理，那么页面不能整体刷新，这时第一想到的就是采用ajax的方式提交表单。下面完整的介绍一个表单采用ajax方式提交的流程。

一、准备

1、页面引入jQuery文件

2、页面引入jQuery的表单插件jQuery.form.js

二、实施

1、页面中的表单

<form id="mainForm" method="post" enctype="multipart/form-data" class="jsrz_main_information">
      <input type="text" name="UserName" value="" />
      <div class="jsrz_main_button">
                <input type="submit" value="提交" id="agreementSub">
        </div>
</form>

2、提交表单的代码
$("#agreementSub").on("click",function(){
       $('#mainForm').ajaxSubmit(      //ajax方式提交表单
            {
                url: '/personal/kaike',
                type: 'post',
                dataType: 'json',
                beforeSubmit: function () {},
                success: function (data) {
                    if (data.Res == "True" || data.Res == true) {
                        $('.jsrz_main_check').html('您的申请已提交，我们将会在1-2个工作日内进行审核，请耐心等待!');
                    } else {
                        alert(data.Msg);
                    }
                },
                clearForm: false,//禁止清楚表单
                resetForm: false //禁止重置表单
            });
});

点击提交按钮触发绑定的click事件。
$('#mainForm').ajaxSubmit(）//中的代码部分也可以封装为一个方法，在其他地方调用。
三、不使用jQuery.from表单插件的方式

$("#maniForm").submit(function (envent)
{
    envent.preventDefault();
    
    var form = $(this);
    $.ajax({
        url: form.attr("action"),
        type: form.attr("mathod"),
        data: form.serialize(),
        dataType: "json",
        beforeSend: function ()
        {
            $("#ajax-loader").show();
        },
        error: function ()
        {
 
        },
        complete:function () {
            $("#ajax-loader").hide();
        },
        success: function (data)
        {
            $("#article").html(data);
        }
    });
});

注：表单中必须有类型为submit的input按钮，用来激活submit方法。此种提交方式只能提交表单中比较简单的文本项，对于file类型的数据无法进行提交。input提交按钮的id和name属性的值不能为submit，否则会造成冲突而无法提交表单。

--------------------- 
作者：代码养家 
来源：CSDN 
原文：https://blog.csdn.net/wangzl1163/article/details/53692080 
版权声明：本文为博主原创文章，转载请附上博文链接！