jQuery基于Ajax方式提交表單功能示例
本文實例講述了jQuery基于Ajax方式提交表單功能。分享給大家供大家參考,具體如下:
提交表單一般通過同步的方式提交,提交后頁面刷新或跳轉(zhuǎn)到新頁面來顯示服務(wù)器端返回的處理結(jié)果。如果表單提交后有另外的操作或業(yè)務(wù)需求需要還在這個頁面上顯示或處理,那么頁面不能整體刷新,這時第一想到的就是采用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個工作日內(nèi)進行審核,請耐心等待!'); } else { alert(data.Msg); } }, clearForm: false,//禁止清楚表單 resetForm: false //禁止重置表單 }); });
點擊提交按鈕觸發(fā)綁定的click事件。
$('#mainForm').ajaxSubmit()//中的代碼部分也可以封裝為一個方法,在其他地方調(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方法。此種提交方式只能提交表單中比較簡單的文本項,對于file類型的數(shù)據(jù)無法進行提交。input提交按鈕的id和name屬性的值不能為submit,否則會造成沖突而無法提交表單。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jquery中Ajax用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
- jquery easyUI中ajax異步校驗用戶名
- 基于jQuery實現(xiàn)Ajax驗證用戶名是否存在實例
- 使用struts2+Ajax+jquery驗證用戶名是否已被注冊
- 基于jQuery實現(xiàn)的Ajax 驗證用戶名是否存在的實現(xiàn)代碼
- Asp.net下利用Jquery Ajax實現(xiàn)用戶注冊檢測(驗證用戶名是否存)
- jquery ajax 檢測用戶注冊時用戶名是否存在
- jQuery基于ajax實現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法
- 原生和jQuery的ajax用法詳解
- jquery ajax提交表單數(shù)據(jù)的兩種方式
- jquery實現(xiàn)ajax提交form表單的方法總結(jié)
- jQuery使用ajaxSubmit()提交表單示例
- jQuery基于ajax方式實現(xiàn)用戶名存在性檢查功能示例
相關(guān)文章
jQuery+PHP實現(xiàn)動態(tài)數(shù)字展示特效
我們在一些應(yīng)用中需要動態(tài)展示數(shù)據(jù),比如當前在線人數(shù),當前交易總額,當前匯率等等,前端頁面需要實時刷新獲取最新數(shù)據(jù)。本文將結(jié)合實例給大家介紹使用jQuery和PHP來實現(xiàn)動態(tài)數(shù)字展示效果。2015-03-03使用jquery mobile做幻燈播放效果實現(xiàn)步驟
使用jquery mobile,可以很容易實現(xiàn)幻燈播放效果,擺脫繁雜的步驟輕松實現(xiàn),接下來介紹,有需要的朋友可以參考下2013-01-01jquery xMarquee實現(xiàn)文字水平無縫滾動效果
這篇文章主要介紹了jquery xMarquee實現(xiàn)文字水平無縫滾動效果,需要的朋友可以參考下2014-04-04jQuery 獲取和設(shè)置select下拉框的值實現(xiàn)代碼
jQuery獲取和設(shè)置select下拉框值的實現(xiàn)代碼。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11