【jQuery基础学习】07 jQuery表单插件-Form
2016-02-02 21:04
513 查看
作用:jQuery Form插件的作用是为了让我们可以很方便地用ajax的方式提交表单,从而使我们提交表单的时候页面不用进行刷新。
它的核心方法是ajaxForm()和ajaxSubmit()
升级表单提交方式的时候很简单,不用去改变HTML结构,如下即可:
提交表单的时候不仅可以像上面的例子那样,给ajaxForm和ajaxSubmit传递一个回调函数,还可以传递一个options对象。
定义了一个options如下:
它的核心方法是ajaxForm()和ajaxSubmit()
升级表单提交方式的时候很简单,不用去改变HTML结构,如下即可:
//就是下面这么简单 $("#myForm").ajaxForm(function(){ //提交成功后的操作 }); //你也可以这样 $("#myform").submit(function(){ $(this).ajaxSubmit(function(){ //提交成功后的操作 }); return false;//阻止表单默认提交 });
提交表单的时候不仅可以像上面的例子那样,给ajaxForm和ajaxSubmit传递一个回调函数,还可以传递一个options对象。
定义了一个options如下:
var options={ target:"#output1",//把服务器返回的内容放入id为output1的元素中 beforeSubmit:function(formData,jqForm,options){//提交前的回调函数 //formData为数组对象,即提交的数据 //jqForm是一个jQuery对象,封装了表单元素 //options就是options对象 //在这个回调函数里,返回false会阻止表单提交 } success:function(responseText,statusText,xhr,$form){//提交后的回调函数 //statusText是返回状态,值为success和error等 //responseText携带服务器返回的的数据内容。 //会根据datatype的类型来返回相应格式的内容 //对于缺省值:返回的是XMLHttpRequest对象的responseXML属性 }, url:url, //默认为form的action,如果申明,就用url type:type, //默认为form的method(post或get),如果申明,就覆盖 dataType:null, //服务端返回的类型 clearForm:true, //成功提交后,清除所有表单元素的值 resetForm:true, //成功提交后,重置所有表单元素的值 timeout:3000 //限制请求的超时时间,大于3秒,跳出请求 } $("myForm").ajaxForm(options);
相关文章推荐
- jQuery初学(一)——关于如何获取网页中的元素
- jQuery的序列化元素 serialize()方法 serializeArray()方法 param()方法
- jQuery键盘
- jQuery - 编写jQuery插件的基本形式(上)
- jquery中是否可见
- jQuery 之 $(this) 出了什么问题?
- jQuery.post( url, [data], [callback], [type] ) : 使用POST方式来进行异步请求
- jquery移除追加元素
- JQuery之回到顶部的特效
- jquery怎样循环获得一组id值
- Web 系统打印插件——jqprint
- [转]jquery.vTicker(垂直滚动)
- jqueryZtree
- 用jQuery编写轮播图插件
- jquery和js使用技巧
- jQuery UI 实例 - 拖动排序(Sortable)
- jQuery AjaxUpload 上传图片代码
- 用jQuery编写图片弹幕评论插件
- jQuery实现动态瀑布流布局效果
- jQuery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码、邮箱验证码