jQuery表單插件jquery form js
概述
jQuery Form Plugin能夠讓你簡潔的將以HTML形式提交的表單升級成采用AJAX技術提交的表單。
插件裏面主要的方法, ajaxForm和ajaxSubmit,能夠從form組件裏采集信息確定如何處理表單的提交過程。
兩個方法都支持眾多的可選參數，能夠讓你對表單裏數據的提交做到完全的控制。
入門指導
一、在你的頁面裏寫一個表單。一個普通的表單，不需要任何特殊的標記：
<form id="myForm" action="login.action" method="post">
姓名: <input type="text" name="name" 二、引入jQuery和jquery.form.js腳本文件並且添加幾句簡單的代碼讓頁面在DOM加載完成後初始化表單：
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script
用戶將會看到一句提示信息"submit success!" 。
Form Plugin API
Form Plugin API裏提供了很多有用的方法可以讓你輕松的處理表單裏的數據和表單的提交過程。
ajaxForm
預處理將要使用AJAX方式提交的表單，將所有需要用到的事件監聽器添加到其中。它不是提交這個表單。
在頁面的ready函數裏使用ajaxForm來給你頁面上的表單做這些AJAX提交的準備工作。
ajaxForm需要零個或一個參數。這唯一的一個參數可以是一個回調函數或者是一個可選參數對象。
$(‘#myFormId‘).ajaxForm();ajaxSubmit
立即通過AJAX方式提交表單。最常見的用法是對用戶提交表單的動作進行響應時調用它。
ajaxForm需要零個或一個參數。唯一的一個參數可以是一個回調函數或者是一個可選參數對象。
$(‘#myFormId‘).submit(function() {
$(this).ajaxSubmit(function() {
alert("success!");
});
return false; //阻止表單默認提交
});formSerialize
將表單序列化成查詢串。這個方法將返回一個形如： name1=value1&name2=value2的字符串。
var queryString = $(‘#myFormId‘).formSerialize();
$.post(‘login.action‘, queryString);resetForm
通過調用表單元素的內在的DOM上的方法把表單重置成最初的狀態。
$(‘#myFormId‘).resetForm();clearForm
清空表單所有元素的值。這個方法將會清空所有的文本框，密碼框，文本域裏的值，去掉下拉列表所有被選中的項，
讓所有復選框和單選框裏被選中的項不再選中。
$(‘#myFormId‘).clearForm();
可選參數項對象
ajaxForm 和 ajaxSubmit 都支持大量的可選參數，它們通過可選參數項對象傳入。
可選參數項對象只是一個簡單的 JavaScript對象，裏邊包含了一些屬性和一些值:具體參數查看官網API
代碼示例
下面實例演示基本的常用參數，以及如何使用表單提交之前和之後的回調函數。
<body>
<form id="myForm" action="login.action" method="post">
姓名: <input type="text" name="name" /> </br>
性別: <input type="radio" name="sex" value="1">男<input type="radio" name="sex" value="0">女</br>
郵箱：<input type="text" name="email"></br></br>
<input type="submit" value="提交" />
</form>
</body>
<script type="text/javascript">
$(function() {
var options = {
beforeSubmit : showRequest, //提交前回調
success : showResponse, //提交成功後回調
clearForm: true //提交成功後清除所有表單數據
//url: url //覆蓋form中action屬性值
//type: type //‘get‘ 或 ‘post‘, 覆蓋form中method屬性值
//dataType: null //‘xml‘, ‘script‘, or ‘json‘
};
$(‘#myForm‘).submit(function() {
$(this).ajaxSubmit(options);
return false;
});
})
function showRequest(formData, jqForm, options) {
var queryString = $.param(formData);
console.info(‘所提交數據為: ‘ + queryString);
return true;
}
function showResponse(responseText, statusText) {
var s = eval("("+responseText+")");
console.info(s); //從後臺返回的數據
console.info(statusText);
}
</script>作者：itmyhome
示例：http://download.csdn.net/detail/itmyhome/8374087
再分享一下我老師大神的人工智能教程吧。零基礎！通俗易懂！風趣幽默！還帶黃段子！希望你也加入到我們人工智能的隊伍中來！https://blog.csdn.net/jiangjunshow
jQuery表單插件jquery form js