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 相关文章推荐
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 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爆绝对路径方法收集整理
2012/09/17 PHP
删除节点的jquery代码
2014/01/13 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
js实现随机点名小功能
2017/08/17 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
python找出完数的方法
2018/11/12 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
EJB的角色和三个对象
2015/12/31 面试题
采购员的工作职责
2013/12/26 职场文书
银行学习十八大感想
2014/01/11 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
教师四风问题整改措施
2014/09/25 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
爱心捐助活动总结
2015/05/09 职场文书
民事起诉状范文
2015/05/19 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python