本文實例講述了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，否則會造成沖突而無法提交表單。
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結》、《jQuery操作json數據技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》、《jQuery表格(table)操作技巧匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
