您的位置：首页 > Web前端 > JQuery

jQuery表单插件jquery.form.js

2015-01-18 21:16 357 查看

概述
jQuery Form Plugin能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单。
插件里面主要的方法, ajaxForm和ajaxSubmit,能够从form组件里采集信息确定如何处理表单的提交过程。
两个方法都支持众多的可选参数，能够让你对表单里数据的提交做到完全的控制。

入门指导

一、在你的页面里写一个表单。一个普通的表单，不需要任何特殊的标记：
<form id="myForm" action="login.action" method="post">
姓名: <input type="text" name="name" />
邮箱：<input type="text" name="email">
<input type="submit" value="提交" />
</form>
二、引入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>
$(function() {
$('#myForm').ajaxForm(function() {
alert("submit success!");
});
})这样就OK了，当表单提交后name和email的值就会被提交给login.action. 如果服务器端返回成功的状态，
用户将会看到一句提示信息"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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航