本文實(shí)例講述了jQuery基于Ajax方式提交表單功能。分享給大家供大家參考，具體如下：
提交表單一般通過同步的方式提交，提交后頁面刷新或跳轉(zhuǎn)到新頁面來顯示服務(wù)器端返回的處理結(jié)果。如果表單提交后有另外的操作或業(yè)務(wù)需求需要還在這個(gè)頁面上顯示或處理，那么頁面不能整體刷新，這時(shí)第一想到的就是采用ajax的方式提交表單。下面完整的介紹一個(gè)表單采用ajax方式提交的流程。
一、準(zhǔn)備
1、頁面引入jQuery文件
2、頁面引入jQuery的表單插件jQuery.form.js
二、實(shí)施
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('您的申請(qǐng)已提交，我們將會(huì)在1-2個(gè)工作日內(nèi)進(jìn)行審核，請(qǐng)耐心等待!'); } else { alert(data.Msg); } }, clearForm: false,//禁止清楚表單 resetForm: false //禁止重置表單 });});點(diǎn)擊提交按鈕觸發(fā)綁定的click事件。
$('#mainForm').ajaxSubmit()//中的代碼部分也可以封裝為一個(gè)方法，在其他地方調(diào)用。三、不使用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方法。此種提交方式只能提交表單中比較簡(jiǎn)單的文本項(xiàng)，對(duì)于file類型的數(shù)據(jù)無法進(jìn)行提交。input提交按鈕的id和name屬性的值不能為submit，否則會(huì)造成沖突而無法提交表單。
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
