jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)


Posted in Javascript onJanuary 04, 2016

本文实例讲述了jQuery插件之jQuery.Form.js用法。分享给大家供大家参考,具体如下:

一、jQuery.Form.js 插件的作用是实现Ajax提交表单。

方法:

1.formSerilize()  用于序列化表单中的数据,并将其自动整理成适合AJAX异步请求的URL地址格式。

2.clearForm()   清除表单中所有输入值的内容。

3.restForm    重置表单中所有的字段内容。即将所有表单中的字段恢复到页面加载时的默认值。

疑问:ajaxForm()与ajaxSubmit()的区别:

答案:$("#form1").ajaxForm();  相当于以下两行:

$("#form1".submit)(function(){
 $("#form1").ajaxSubmit();
return false;
})

也就是说ajaxFrom()会自动阻止表单提交。而ajaxSubmit()不会自动阻止表单提交,想阻止表单提交,要自己return false;

技巧1:如果希望表单提交完成后不跳转,那么一行简单的代码就能够实现,几乎与不使用表单提交是一样的:

$("#MailForm").ajaxSubmit(function(message) {
  alert("表单提交已成功!");
});

注意:ajaxForm()与ajaxForm()都可以没有参数或者接受1个参数。该参数既可以是一个回调函数,也可以是一个options对象。该对象功能非常强大,说明如下:

var options={
 url:url, //form提交数据的地址
 type:type, //form提交的方式(method:post/get)
 target:target, //服务器返回的响应数据显示在元素(Id)号确定
 beforeSubmit:function(), //提交前执行的回调函数
 success:function(), //提交成功后执行的回调函数
 dataType:null, //服务器返回数据类型
 clearForm:true, //提交成功后是否清空表单中的字段值
 restForm:true, //提交成功后是否重置表单中的字段值,即恢复到页面加载时的状态
 timeout:6000 //设置请求时间,超过该时间后,自动退出请求,单位(毫秒)。
}

例子:

页面js代码:

<script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script src="jQuery.Form.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
  $(":submit").click(function () {
    var options = {
      url: "indexAjax.aspx",
      target: "#div2",
      success: function () {
        alert("ajax请求成功");
      }
    };
    $("#form1").ajaxForm(options);
  })
})
</script>

页面HTML代码:

<div id="div1">
<form id="form1" method="get" action="#">
  <p>我的名字:<input type="text" name="name" value="请输入内容" /></p>
  <p>我的偶像是:<input type="radio" name="Idol" value="刘德华" />刘德华  <input type="radio" name="Idol" value="张学友" />张学友</p>
  <p>我喜欢的音乐类型:<input type="checkbox" name="musictype" value="1.摇滚">摇滚 <input type="checkbox" name="musictype" value="2.轻松">轻柔 <input type="checkbox" name="musictype" value="3.爵士">爵士</p>
  <p><input type="submit" value="确认" /></p>
</form>
</div>
<div id="div2">
</div>

后台:indexAjax.aspx.cs代码

protected void Page_Load(object sender, EventArgs e)
{
  string strName = Request["name"];
  string strIdol = Request["Idol"];
  string strMusicType = Request["musictype"];
  Response.Clear();
  Response.Write("我的名字是:" + strName + ";  我的偶像是:" + strIdol + ";  我喜欢的音乐类型:" + strMusicType);
  Response.End();
}

示例代码点击此处本站下载。

关于更多jQuery插件用法还可参阅本站相关专题:《jQuery常用插件及用法总结》。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
javascript 关闭IE6、IE7
Jun 01 Javascript
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
理解javascript闭包
Dec 15 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 Javascript
原生JS实现拖拽效果
Dec 04 Javascript
深入浅析AngularJS中的module(模块)
Jan 04 #Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 #Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 #Javascript
详解Bootstrap glyphicons字体图标
Jan 04 #Javascript
详解Bootstrap按钮
Jan 04 #Javascript
详解Bootstrap四种图片样式
Jan 04 #Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 #Javascript
You might like
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
分享php多功能图片处理类
2016/05/15 PHP
关于jQuery中的end()使用方法
2011/07/10 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
微信小程序后端实现授权登录
2020/02/24 Javascript
Python实现控制台输入密码的方法
2015/05/29 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
浅谈五大Python Web框架
2017/03/20 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
python读取并写入mat文件的方法
2019/07/12 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
医学院学生求职简历的自我评价
2013/10/24 职场文书
成教自我鉴定
2013/10/27 职场文书
医学生自我鉴定范文
2013/11/08 职场文书
成龙洗发水广告词
2014/03/14 职场文书
法学专业求职信
2014/07/15 职场文书
银行授权委托书样本
2014/10/13 职场文书
演讲开场白台词大全
2015/05/29 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
Oracle用户管理及赋权
2022/04/24 Oracle