基于jQuery通过jQuery.form.js插件使用ajax提交form表单


Posted in Javascript onAugust 17, 2015

我们在提交表单的时候,如果没有使用ajax提交,页面都会自己刷新一下,显得非常的不友好,所以我们需要把我们的表单提交修改为ajax的模式,可以让用户清楚地知道他们在提交表单的时候处在哪一个阶段:正在提交?提交成功?

我简单使用了一下,jQuery Form插件有一下优点:

1.支持提交前验证.

2.支持提交后回调.

3.采用AJAX方式,有很好的用户体验

4.提交方式是灵活.只要指定要提交的form ID即可.想提交那个form.就可提交那个.同时提交参数可配置.

5.支持提交多种类型数据.如:xml,json等.

主要的函数:

1.ajaxForm

增加所有需要的事件监听器,为AJAX提交表单做好准备。ajaxForm不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。ajaxForm接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options对象。

实例:

$('#myFormId').ajaxForm();

2.ajaxSubmit

马上由AJAX来提交表单。大多数情况下,都是调用ajaxSubmit来对用户提交表单进行响应。ajaxSubmit接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options对象。

实例:

// 绑定表单提交事件处理器
$('#myFormId').submit(function() {
// 提交表单
$(this).ajaxSubmit();
// 为了防止普通浏览器进行表单提交和产生页面导航(<span style="color: #333333;"><a href="http://www.100sucai.com/web/jquerytexiao/huandengpian" target="_blank"><span style="color: #333333;">防止页面刷新</span></a></span>?)返回false
return false;
});

3.formSerialize

将表单串行化(或序列化)成一个查询字符串。这个方法将返回以下格式的字符串:name1=value1&name2=value2。这个方法返回一个字符串。

实例:

var queryString = $('#myFormId').formSerialize();
// 现在可以使用$.get、$.post、$.ajax等来提交数据
$.post('myscript.php', queryString);

4.fieldSerialize

将表单的字段元素串行化(或序列化)成一个查询字符串。当只有部分表单字段需要进行串行化(或序列化)时,这个就方便了。这个方法将返回以下格式的字符串:name1=value1&name2=value2。这个方法返回一个字符串。

实例:

var queryString = $('#myFormId .specialFields').fieldSerialize();

5.fieldValue

返回匹配插入数组中的表单元素值。从0.91版起,该方法将总是以数组的形式返回数据。如果元素值被判定可能无效,则数组为空,否则它将包含一个或多于一个的元素值。该方法返回数组。

实例:

// 取得密码输入值
var value = $('#myFormId :password').fieldValue(); 
alert('The password is: ' + value[0]);

6.resetForm

通过调用表单元素原有的DOM方法,将表单恢复到初始状态。
实例:

$('#myFormId').resetForm();

7.clearForm

清除表单元素。该方法将所有的文本(text)输入字段、密码(password)输入字段和文本区域(textarea)字段置空,清除任何select元素中的选定,以及将所有的单选(radio)按钮和多选(checkbox)按钮重置为非选定状态。

实例:

$('#myFormId').clearForm();

8.clearFields

清除字段元素。只有部分表单元素需要清除时才方便使用。

实例:

$('#myFormId .specialFields').clearFields();

jQuery Form插件的简单示例:

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>My Jquery</title>
  <script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery-1.4.2.js"></script>
  <script type="text/javascript" src="<%=request.getContextPath()%>/jslib/jquery.form.js"></script>
  <script type="text/javascript"> 
  // wait for the DOM to be loaded
    $(document).ready(function() { 
     // bind 'myForm' and provide a simple callback function
      $('#myForm').ajaxForm(function() { 
        alert("Thank you for your comment!"); 
      }); 
    }); 
    // attach handler to form's submit event 
    $('#myFormId').submit(function() {   
     // submit the form   
     $(this).ajaxSubmit();   
     // return false to prevent normal browser submit and page navigation   
     return false; 
    });
  </script>
</head>
<body>
  <form id="myForm" action="index.jsp" method="post">
  Name: <input type="text" name="name" />
  Comment:<textarea name="comment"></textarea>
  <input type="submit" value="Submit Comment" />
  </form>
</body>
</html>

通过本文详细介绍了jQuery通过jQuery.form.js插件使用ajax提交form表单,希望大家喜欢。

Javascript 相关文章推荐
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
js单例模式的两种方案
Oct 22 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 #Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 #Javascript
关于js里的this关键字的理解
Aug 17 #Javascript
Nginx上传文件全部缓存解决方案
Aug 17 #Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 #Javascript
javascript中 try catch用法
Aug 16 #Javascript
javascript中undefined与null的区别
Aug 16 #Javascript
You might like
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
Python如何实现文本转语音
2016/08/08 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
越南综合购物网站:Lazada越南
2019/06/10 全球购物
化工机械应届生求职信
2013/11/04 职场文书
项目经理的岗位职责
2013/11/23 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
操行评语大全
2014/04/30 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
大型公益活动策划方案
2014/08/20 职场文书
2015感人爱情寄语
2015/02/26 职场文书
项目验收申请报告
2015/05/15 职场文书
大学生见习总结报告
2015/06/24 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
Redis Cluster集群动态扩容的实现
2021/07/15 Redis