Control jquery.fn.ajaxform

定義于文件：??jquery.form.js

允許你輕易的提交表單。

基本語法

$('#myFormId').ajaxForm();

參數說明

• target?: String
• (可選參數)更新到服務器響應的元素標識符，這個值可以指定為一個JQUERY選擇器字符串，一個JQUERY對象，或一個DOM元素。
• url?: String
• (可選參數)將要提交form數據URL，默認值：form動作屬性。
• type?: String
• (可選參數)'get' 或 'post'，override for form's 'method' attribute
• dataType?: String
• (可選參數) 'xml', 'script', or 'json' (期待服務器響應類型)
• clearForm?: boolean
• (可選參數) true，提交成功后清除表單所有字段
• resetForm?: boolean
• (可選參數) 提交成功后重置表單.
• beforeSubmit?: function
• (可選參數) 提交前的callback
• success?: function
• (可選參數) 提交成功后的callback
• semantic?: boolean
• (可選參數) 是否嚴格語義提交
• iframe?: null
• (可選參數) 是否表單提交target總是iframe.
• timeout?: number
• (可選參數) 超時

依賴關系

jquery.js

相關方法

相關方法	所屬類
fieldValue() 返回匹配元素的值到一個數組	jquery.ajaxform
ajaxSubmit([option]) 通過增加所有需要事件監控器 實現ajax提交表單

--------------------------------------------------------------------------------------------------

HTML代碼：

<form method="post" action="" id="ajaxform">
????????????<div class="bbit-form bbit-infocontainer">
????????????????<h3>
????????????????????人員信息登記</h3>
????????????????<ul>
????????????????????<li>
????????????????????????<label for="name">
????????????????????????????姓名</label>
????????????????????????<input type="text" id="name" name="name"></li>
????????????????????<li>
????????????????????????<label>
????????????????????????????性別</label>
????????????????????????<input type="radio" id="gender_0" value="男" name="gender">
????????????????????????<label for="gender_0">
????????????????????????????男</label>
????????????????????????<input type="radio" id="gender_1" value="女" name="gender">
????????????????????????<label for="gender_1">
????????????????????????????女</label>
????????????????????</li>
????????????????????<li>
????????????????????????<label for="birthday">
????????????????????????????生日</label>
????????????????????????<input type="text" maxlength="10" readonly="readonly" name="birthday" style="width: 100px;" id="birthday" class="bbit-dp-input"><img align="middle" alt="" src="/themes/shared/images/s.gif" class="picker">
????????????????????</li>
????????????????????<li>
????????????????????????<label for="vocation">
????????????????????????????職業</label>
????????????????????????<select id="vocation" name="vocation">
????????????????????????????<option value="PG">軟件工程師</option>
????????????????????????????<option value="PM">項目經理</option>
????????????????????????????<option value="OA">質量控制</option>
????????????????????????????<option value="BOSS">老板</option>
????????????????????????</select>
????????????????????</li>
????????????????????<li>
????????????????????????<label>
????????????????????????????愛好</label>
????????????????????????<label>
????????????????????????????<input type="checkbox" id="Hobbies_0" value="體育" name="hobbies">
????????????????????????????體育</label>
????????????????????????<label>
????????????????????????????<input type="checkbox" id="Hobbies_1" value="音樂" name="hobbies">
????????????????????????????音樂</label>
????????????????????????<label>
????????????????????????????<input type="checkbox" id="Hobbies_2" value="電子游戲" name="hobbies">
????????????????????????????電子游戲</label>
????????????????????</li>
????????????????????<li>
????????????????????????<label for="remark">
????????????????????????????備注</label>
????????????????????????<textarea class="bbit-textbox-TextArea" rows="6" cols="40" id="remark" name="remark"></textarea></li>
????????????????????<li>
????????????????????????<input type="submit" value="提交">
????????????????????</li>
????????????????</ul>
????????????</div>
</form>

Jquery 代碼：

//參數配置

var?o = {

dataType:?"json",

url:?"formHandler.ashx",

type:?"post",

beforeSubmit: beforeSubmit,?

success: ProcessJson

};

//調用方式

$("#ajaxform").ajaxForm(o);

// 提交前的callback函數

function?beforeSubmit(formData, jqForm, options) {

????var?queryString = $.param(formData); alert('提交之前數據被序列化成：\n\n'?+ queryString); return?true;

?

} //提交成功后的callback函數 function?ProcessJson(person) { var?ret =?"服務器端接收到的數據Person類:" ret +=?"\r\nname="?+ person.name; ret +=?"\r\ngender="?+ person.gender; ret +=?"\r\nbirthday="?+ person.birthday; ret +=?"\r\nvocation="?+ person.vocation; ret +=?"\r\nhobbies="?+ person.hobbies; ret +=?"\r\nremark="?+ person.remark; alert(ret); }

轉載于:https://www.cnblogs.com/shinehouse/articles/3179416.html

總結

以上是生活随笔為你收集整理的AjaxForm的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。