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，否則會造成沖突而無法送出表單。