Jquery Form Plugin 是jquery 最重要的插件之一，它利用AJAX技术在不引起页面刷新的情况下POST表单。主要有两个方法：ajaxform 和ajaxsubmit
先在页面里设置一个普通的表单：
Js代码
1. 1.
2. <form id="myForm" action="comment.php" method="post">
3. 2.
4. 姓名: <input type="text" name="name" id="name"/>
5. 3.
6. 评论: <textarea name="comment" id="comment"></textarea>
7. 4.
8. <input type="submit" value="提交评论" />
9. 5.
10. </form>
1.
<form id="myForm" action="comment.php" method="post">
2.
姓名: <input type="text" name="name" id="name"/>
3.
评论: <textarea name="comment" id="comment"></textarea>
4.
<input type="submit" value="提交评论" />
5.
</form>
加载jquery库和插件脚本库。然后简单地写一段初始化脚本，这段脚本将在DOM加载完成时执行：
• 3.
• <script type="text/javascript" src="form.js"></script> //加载插件
• 4.
• <script type="text/javascript">
• 5.
• // DOM加载完毕后执行
• 6.
• $(document).ready(function() {
• 7.
• // 绑定'myForm'并定义一个简单的回调函数
• 8.
• $('#myForm').ajaxForm(function() {
• 9.
• alert("评论提交完成!");
• 10.
• });
• 11.
• });
• 12.
• </script>
• 13.
• </head>
1.
<head>
2.
<script type="text/javascript" src="jquery.js"></script> //加载jquery
3.
<script type="text/javascript" src="form.js"></script> //加载插件
4.
<script type="text/javascript">
5.
// DOM加载完毕后执行
6.
$(document).ready(function() {
7.
// 绑定'myForm'并定义一个简单的回调函数
8.
$('#myForm').ajaxForm(function() {
9.
alert("评论提交完成!");
10.
});
11.
});
12.
</script>
13.
</head>
OK，就是这么简单。当点击“提交评论”按钮后，表单的数据就会POST到comment.php脚本，并且返回“评论提交完成”信息（如果提交成功）。页面并没有刷新，非常AJAX……
让我们来看看这个插件还有什么强大的功能。
ajaxForm
该方法须预先绑定表单，所以它一般在$(document).ready(function() { ...}里定义。它能让表单在不刷新页面的情况下POST到目标。可以为该方法提供一个参数，参数一般是一个回调函数用于返回信息给用户。当然如果不提供参数也行，只是表单提在无声无息地提交后无法得到确认了。
ajaxSubmit
该方法是以响应事件来通用AJAX方式提交表单。比如点击某个按钮或改变了某个下拉框的值，在触发事件函数里可以设置该方法。如：
Js代码
1. 1.
2. $("#clickme").click(function(){
3. 2.
4. $("#myForm").ajaxSubmit();
5. 3.
6. });
或者这样：
HTML:
Html代码
1. <select id="mySelect" onchange="$(‘#myForm’).ajaxSubmit();">
<select id="mySelect" οnchange="$(‘#myForm’).ajaxSubmit();">
formSerialize
该方法可以表单域的名称和值连接起来，形成一个字符串，字符串格式为name1=value1&name2=value2...比如：
1.
1. var queryString=$("#myForm").formSerialize();
var queryString=$("#myForm").formSerialize();
变量queryString的值将为变成name=xxx&comment=xxx。得到这个字符串后，可以用$.post来提交，如：$.post("comment.php",queryString);
fieldSerialize
和formSerialize一样，返回一个字符串，但返回的是表单指定元素或特定元素类型域的字符串。返回字符串格式也是一样的。如：
- Js代码
1.
1. var queryString = $('#myForm :text').fieldSerialize();//返回myForm表单内所有文本框的字符串值。
var queryString = $('#myForm :text').fieldSerialize();//返回myForm表单内所有文本框的字符串值。
fieldValue
返回一个数组，记录表单元素的值。如果表单没有值则对应数组值为空。如：
JavaScript:
Js代码
- var data=$(':text').fieldValue();//返回所有表单中所有文本框类型的值。
var data=$(':text').fieldValue();//返回所有表单中所有文本框类型的值。
变量data为['','','']这样的一个数组，数组元素对应表单元素的值。事实上我们可以这样来得到“姓名”文本框里的值：var data=$("#name").val();（这个元素要有ID属性）这样的作法不需要jquery form插件也可以得到值。但使用插件可以更方便地取得单个或多个表单中特定元素域的值。比如取得所有文本框或所有复选框的值。只要加个“:"就可以。这种方法也可以用到formSerialize或fieldSerialize方法上。
1.
1. var data=$("#myForm :text").fieldValue();//取得在myForm表单里所有文本框的值。
var data=$("#myForm :text").fieldValue();//取得在myForm表单里所有文本框的值。1.
1. var data=$("#myForm :text").fieldValue();//取得在myForm表单里所有文本框的值。
var data=$("#myForm :text").fieldValue();//取得在myForm表单里所有文本框的值。
formToArray
同样也返回一个数组，这个数组是对象数组。对象有name和value两个属性，分别记录表单中的元素名称和元素值。如：
- Js代码
1.
1. var data=$("#myForm").formToArray();
var data=$("#myForm").formToArray();
变量data得到的是一个对象数组。data[0].name保存myForm表单中第一个表单元素的名称属性值，这里是”name"。data[0].value保存myForm表单中第一个表单元素的值，这里就是填了什么值就是什么。
resetForm
该方法很简单啦，恢复表单初始状态。也就恢复到DOM加载完成时的表单状态。类似“重设表单”
clearFields
清除表单域元素。可以清除特定类型的域元素，比如清除所有文本框的，或所有复选框的域。
jquery表单应用
Posted on 10月 10th, 2007 in 我学 | 1 Comment ?
有必要获取表单内各input元素的数据，然后用ajax方法以POST方式提交给服务器。如果input元素有ID属性，假设是<input type="text" name="writer" id="writer" />，可以这样获取：
var writervalue=$("#writer").val();
再来一个按扭吧，点击按钮后POST到ok.php去。
Html代码
1. <input name="writer" id="writer" type="text" value="writer" />
2. <input type="submit" name="button" id="button" value="提交" />
<input name="writer" id="writer" type="text" value="writer" />
<input type="submit" name="button" id="button" value="提交" />
先不考虑用submit提交表单，因为有jquery的 Form插件 可以近乎完美地完成表单的提交。这是个很强大的插件……
• <script type="text/javascript">
•
• $(document).ready(function(){ //DOM的onload事件处理函数
• $("#button").click(function(){ //当按钮button被点击时的处理函数
• postdata(); //button被点击时执行postdata函数
• });
• });
•
• function postdata(){ //提交数据函数
• $.ajax({ //调用jquery的ajax方法
• type: "POST", //设置ajax方法提交数据的形式
• url: "ok.php", //把数据提交到ok.php
• data: "writer="+$("#writer").val(), //输入框writer中的值作为提交的数据
• success: function(msg){ //提交成功后的回调，msg变量是ok.php输出的内容。
• alert("数据提交成功"); //如果有必要，可以把msg变量的值显示到某个DIV元素中
• }
• });
• }
•
• </script>
<script type="text/javascript" src="jquery.js" mce_src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ //DOM的onload事件处理函数 $("#button").click(function(){ //当按钮button被点击时的处理函数 postdata(); //button被点击时执行postdata函数 }); }); function postdata(){ //提交数据函数 $.ajax({ //调用jquery的ajax方法 type: "POST", //设置ajax方法提交数据的形式 url: "ok.php", //把数据提交到ok.php data: "writer="+$("#writer").val(), //输入框writer中的值作为提交的数据 success: function(msg){ //提交成功后的回调，msg变量是ok.php输出的内容。 alert("数据提交成功"); //如果有必要，可以把msg变量的值显示到某个DIV元素中 } }); } </script>
大功告成！假如输入框很多，在ajax方法的data参数里可以这样表示：
data:"n1=&n2=&n3=..."
jquery的Form插件 可以轻松而且不引发页面刷新地提交表单，所以这个插件被很多开发人员使用（插件需要在jquery库之后加载）。这个插件提供一个formToArray方法获得表单中所有元素的值的数组，可以这样做：
var data = $("#myForm").formToArray();
$.post( "ok.php", data );
变量data事实上是个数组。变量通过jquery的post方法提交到ok.php。
看上去用post方法要比ajax方法省事。jquery的ajax方法是low-level（底层）处理机制，而post、get、方法则是 higher-level（高层）处理机制，已经被封装好了的，更容易理解和使用。但也有缺点，就是不能返回更详细的信息，比如错误处理……
