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 相关文章推荐
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 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中随机显示图片的函数代码
2011/06/23 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
php用户名的密码加密更安全的方法
2019/06/21 PHP
在模板页面的js使用办法
2010/04/01 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
element中的$confirm的使用
2020/04/26 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
详细介绍Python语言中的按位运算符
2013/11/26 Python
python中管道用法入门实例
2015/06/04 Python
python实现的希尔排序算法实例
2015/07/01 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
美国钻石商店:Zales
2016/11/20 全球购物
医药营销专业个人自荐信
2013/09/29 职场文书
问卷调查计划书
2014/01/10 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
授权委托书范本
2014/04/03 职场文书
2014年导购员工作总结
2014/11/18 职场文书
Python中的xlrd模块使用整理
2021/06/15 Python
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP
PO模式在selenium自动化测试框架的优势
2022/03/20 Python