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 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
Tab切换组件(选项卡功能)实例代码
Nov 21 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
浅谈类似于(function(){}).call()的js语句
Mar 30 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 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
第三节 定义一个类 [3]
2006/10/09 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
php cli 小技巧
2013/06/03 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
php简单统计中文个数的方法
2016/09/30 PHP
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
深入浅析python的第三方库pandas
2020/02/13 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
经典c++面试题五
2014/12/17 面试题
优秀干部获奖感言
2014/01/31 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
Log4j.properties配置及其使用
2021/08/02 Java/Android