jQuery Form是一个优秀的表单插件,它可以非常容易地,无侵入地升级HTML表单以支持Ajax

jQuery Form表单插件的下载地址为

http://jquery.malsup.com/form/#download

1、核心方法ajaxForm()和ajaxSubmit()  

$('#myForm').ajaxForm(function() {
$('#output1').html("提交成功!欢迎下次再来!").show();
}); $('#myForm2').submit(function() {
$(this).ajaxSubmit(function() {
$('#output2').html("提交成功!欢迎下次再来!").show();
});
return false; //阻止表单默认提交
});

ajaxForm() 和 ajaxSubmit() 都能接受0个或1个参数,当为单个参数时,该参数既可以是一个回调函数,也可以是一个options对象,上面的例子就是回调函数,下面介绍options对象,使得它们对表单拥有更多的控制权

var options = {
target: '#output', //把服务器返回的内容放入id为output的元素中
beforeSubmit: showRequest, //提交前的回调函数
success: showResponse, //提交后的回调函数
//url: url, //默认是form的action, 如果申明,则会覆盖
//type: type, //默认是form的method(get or post),如果申明,则会覆盖
//dataType: null, //html(默认), xml, script, json...接受服务端返回的类型
//clearForm: true, //成功提交后,清除所有表单元素的值
//resetForm: true, //成功提交后,重置所有表单元素的值
timeout: 3000 //限制请求的时间,当请求大于3秒后,跳出请求
} function showRequest(formData, jqForm, options){
//formData: 数组对象,提交表单时,Form插件会以Ajax方式自动提交这些数据,格式如:[{name:user,value:val },{name:pwd,value:pwd}]
//jqForm: jQuery对象,封装了表单的元素
//options: options对象
var queryString = $.param(formData); //name=1&address=2
var formElement = jqForm[0]; //将jqForm转换为DOM对象
var address = formElement.address.value; //访问jqForm的DOM元素
return true; //只要不返回false,表单都会提交,在这里可以对表单元素进行验证
}; function showResponse(responseText, statusText){
//dataType=xml
var name = $('name', responseXML).text();
var address = $('address', responseXML).text();
$("#xmlout").html(name + " " + address);
//dataType=json
$("#jsonout").html(data.name + " " + data.address);
}; $("#myForm").ajaxForm(options); $("#myForm2").submit(funtion(){
$(this).ajaxSubmit(options);
return false; //阻止表单默认提交
});

表单提交之前进行验证:  beforeSubmit会在表单提交前被调用,如果beforeSubmit返回false,则会阻止表单提交

beforeSubmit: validate
function validate(formData, jqForm, options) { //在这里对表单进行验证,如果不符合规则,将返回false来阻止表单提交,直到符合规则为止
//方式一:利用formData参数
for (var i=0; i < formData.length; i++) {
if (!formData[i].value) {
alert('用户名,地址和自我介绍都不能为空!');
return false;
}
} //方式二:利用jqForm对象
var form = jqForm[0]; //把表单转化为dom对象
if (!form.name.value || !form.address.value) {
alert('用户名和地址不能为空,自我介绍可以为空!');
return false;
} //方式三:利用fieldValue()方法,fieldValue 是表单插件的一个方法,它能找出表单中的元素的值,返回一个集合。
var usernameValue = $('input[name=name]').fieldValue();
var addressValue = $('input[name=address]').fieldValue();
if (!usernameValue[0] || !addressValue[0]) {
alert('用户名和地址不能为空,自我介绍可以为空!');
return false;
} var queryString = $.param(formData); //组装数据
//alert(queryString); //类似 : name=1&add=2
return true;
}

最新文章

  1. IOAPIC重定位中断处理函数思路整理
  2. 将 PAGE_VERIFY 数据库选项设置为 CHECKSUM
  3. C# 远程网络唤醒介绍及代码
  4. [51单片机] TFT2.4彩屏1 [文字显示 画矩形]
  5. Android 广播机制(两种注册方法)与中断广播
  6. 多组 RadioButtonList 获取值
  7. 【转】Kinect使用
  8. HDU 4548 美素数(打表)
  9. oracle 锁表、解锁的语句
  10. 外观模式(Facade)
  11. tunnel sw
  12. GitHub访问慢
  13. Yahoo Programming Contest 2019.D.Ears(DP)
  14. JAVA(二)异常/包及访问权限/多线程/泛型
  15. 如何使用Ubuntu中的avdManager命令行为“System-Image;Androd-27;GoogleAPI;x86”创建一个AVD?
  16. js 获取字符串的 像素 宽度 ----字符串格式化输出
  17. 【转】numpy-array自带的迭代器-----np.nditer
  18. 【LeetCode】41. First Missing Positive (3 solutions)
  19. [na]windows2008-AD域的安装
  20. 揭密FutureTask

热门文章

  1. 使用virtualenv, uwsgi, nginx来布署django
  2. css样式大全(整理版)
  3. 转:GRADLE构建最佳实践
  4. 又一次遇到Data truncation: Data too longData truncation: Data too long问题
  5. 如何把VBS转换为EXE文件
  6. 习科小D整理找网站后台办法[科普]
  7. Linux程序
  8. Oracle中group by 的扩展函数rollup、cube、grouping sets
  9. 何为SLAM
  10. FileUpload控件预览图片