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 相关文章推荐
JS获取scrollHeight问题想到的标准问题
May 27 Javascript
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
javascript 闭包疑问
Dec 30 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
7个你应该知道的JS原生错误类型
Apr 29 Javascript
vue判断按钮是否可以点击
Apr 09 Vue.js
深入浅析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 文件上传模型,支持多文件上传
2009/08/13 PHP
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
php开发环境配置记录
2011/01/14 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
PHP的几个常用加密函数
2016/02/03 PHP
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
浅谈Vue.js
2017/03/02 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
Python正则表达式介绍
2012/08/06 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
绿化工程实施方案
2014/03/17 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
2014年度个人工作总结
2014/11/07 职场文书
党员自我评价范文2015
2015/03/03 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android