一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

分享

Ajax表單提交插件jquery form

 香臺(tái)麗舍 2014-12-04

HTML

首先我們載入jquery庫和jquery.form.js插件。jquery.form.js插件的官網(wǎng)地址:http://www./jquery/form/

 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.form.min.js"></script> 

然后,我們在頁面的body中加入一個(gè)簡單的表單代碼:

 
<form id="my_form" action="submit.php" method="post">  
   <p>姓名:<input type="text" name="uname" id="uname" class="input"></p> 
   <p>性別:<input type="radio" name="sex" value="1" checked> 男 <input type="radio" name="sex" 
 value="2"> 女 </p> 
   <p>年齡:<input type="text" name="age" id="age" class="input" style="width:50px"></p> 
   <p style="margin-left:30px"><input type="submit" class="btn" value="提交"> 
<span id="msg"></span></p> 
</form> 
<div id="output"></div> 

表單中,要求輸入姓名、性別和年齡,然后提交到submit.php處理,通常情況下,點(diǎn)擊“提交”按鈕后,頁面會(huì)轉(zhuǎn)到submit.php處理表單數(shù)據(jù),而我們使用jquery.form插件后,頁面并不會(huì)跳轉(zhuǎn),直接完成了一個(gè)ajax交互。

jQuery

我們很方便的調(diào)用jquery.form插件,利用ajaxSubmit()使得整個(gè)表單的ajax提交過程變得非常的簡單。

 
$(function(){ 
    var options = {  
        beforeSubmit:  showRequest,  //提交前處理 
        success:       showResponse,  //處理完成 
        resetForm: true,  
        dataType:  'json'  
    };  
  
    $('#my_form').submit(function() {  
        $(this).ajaxSubmit(options);  
    });  
}); 
 
function showRequest(formData, jqForm, options) {  
    var uname = $("#uname").val(); 
    if(uname==""){ 
        $("#msg").html("姓名不能為空!"); 
        return false; 
    } 
     
    var age = $("#age").val(); 
    if(age==""){ 
        $("#msg").html("年齡不能為空!"); 
        return false; 
    } 
    $("#msg").html("正在提交..."); 
     
     
    return true;  
}  
  
function showResponse(responseText, statusText)  {  
    $("#msg").html('提交成功'); 
    var sex = responseText.sex==1?"男":"女"; 
    $("#output").html("姓名:"+responseText.uname+" 性別:"+sex+" 年齡:"+responseText.age); 
}  

以上代碼完成了表單提交前的驗(yàn)證以及提交后的處理。表單數(shù)據(jù)提交到submit.php后,我們可以根據(jù)實(shí)際情況通過submit.php檢測數(shù)據(jù)、將數(shù)據(jù)寫入數(shù)據(jù)庫,返回操作結(jié)果等等操作,本文不再列出代碼。

ajaxSubmit()選項(xiàng)設(shè)置

ajaxSubmit()提供了豐富的選項(xiàng)設(shè)置,我們根據(jù)使用的可能性大小進(jìn)行列表,以供參考。

屬性 描述
url Ajax請求將要提交到該url,默認(rèn)是表單的action屬性值
type 指定提交表單數(shù)據(jù)的方法(method):“GET”或“POST”。默認(rèn)值:表單的method屬性值(如果沒有找到默認(rèn)為“GET”)。
dataType 期望返回的數(shù)據(jù)類型。null、“xml”、“script”或者“json”其中之一。dataType提供一種方法,它規(guī)定了怎樣處理服務(wù)器的響應(yīng)。這個(gè)被直接地反映到j(luò)Query.httpData方法中去。下面的值被支持:
'xml':如果dataType == 'xml',將把服務(wù)器響應(yīng)作為XML來對待。同時(shí),如果“success”回調(diào)方法被指定, 將傳回responseXML值。
'json':如果dataType == 'json', 服務(wù)器響應(yīng)將被求值,并傳遞到“success”回調(diào)方法,如果它被指定的話。。
'script':如果dataType == 'script', 服務(wù)器響應(yīng)將求值成純文本。。
默認(rèn)值:null(服務(wù)器返回responseText值)
target 指明頁面中由服務(wù)器響應(yīng)進(jìn)行更新的元素。元素的值可能被指定為一個(gè)jQuery選擇器字符串,一個(gè)jQuery對象,或者一個(gè)DOM元素。
默認(rèn)值:null。
beforeSubmit 表單提交前被調(diào)用的回調(diào)函數(shù)?!癰eforeSubmit”回調(diào)函數(shù)作為一個(gè)鉤子(hook),被提供來運(yùn)行預(yù)提交邏輯或者校驗(yàn)表單數(shù)據(jù)。如果“beforeSubmit”回調(diào)函數(shù)返回false,那么表單將不被提交?!癰eforeSubmit”回調(diào)函數(shù)帶三個(gè)調(diào)用參數(shù):數(shù)組形式的表單數(shù)據(jù),jQuery表單對象,以及傳入ajaxForm/ajaxSubmit中的Options對象。
默認(rèn)值:null
success 表單成功提交后調(diào)用的回調(diào)函數(shù)。如果提供“success”回調(diào)函數(shù),當(dāng)從服務(wù)器返回響應(yīng)后它被調(diào)用。然后由dataType選項(xiàng)值決定傳回responseText還是responseXML的值。
默認(rèn)值:null
clearForm 表示如果表單提交成功是否清除表單數(shù)據(jù)。默認(rèn)值:null
resetForm 表示如果表單提交成功是否進(jìn)行重置。默認(rèn)值: null

jquery.form插件還提供了formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等方法。通常我們可以使用表單驗(yàn)證插件和jquery.form插件一起使用,效果更好。

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多

    九九热精品视频免费在线播放| 国产精品蜜桃久久一区二区| 亚洲欧洲日韩综合二区| 亚洲一区二区三区国产| 日本在线视频播放91| 国产精品一区二区视频成人| 国产福利一区二区久久| 亚洲一区二区亚洲日本| 成年人视频日本大香蕉久久| 亚洲综合香蕉在线视频| 91在线国内在线中文字幕| 欧美黑人在线精品极品| 精品亚洲一区二区三区w竹菊| 久久精品国产在热亚洲| 久久精品国产在热亚洲| 成人精品视频在线观看不卡| 国产成人午夜在线视频| 国产成人免费激情视频| 日韩精品日韩激情日韩综合| 亚洲午夜av久久久精品| 不卡在线播放一区二区三区| 好吊色免费在线观看视频| 黄色污污在线免费观看| 风间中文字幕亚洲一区| 富婆又大又白又丰满又紧又硬| 午夜福利在线观看免费| 亚洲精品福利入口在线| 91人妻人人精品人人爽| 91爽人人爽人人插人人爽| 日本乱论一区二区三区 | 爱在午夜降临前在线观看| 日韩一区二区三区观看| 国产亚洲中文日韩欧美综合网 | 国产成人精品一区二区在线看| 日本精品中文字幕人妻| 成人你懂的在线免费视频| 欧美中文字幕日韩精品| 欧美日韩国产二三四区| 国产传媒中文字幕东京热| 扒开腿狂躁女人爽出白浆av| 亚洲国产av国产av|