基于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 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
jQuery 使用手册(六)
Sep 23 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
解决给dom元素绑定click等事件无效问题的方法
Feb 17 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 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获取当前页面URL函数实例
2014/10/22 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
Yii快速入门经典教程
2015/12/28 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
prototype 中文参数乱码解决方案
2009/11/09 Javascript
围观tangram js库
2010/12/28 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
js获取内联样式的方法
2015/01/27 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
师德个人剖析材料
2014/02/02 职场文书
奥林匹克的口号
2014/06/13 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
企业培训简报范文
2015/07/20 职场文书
中学生运动会广播稿
2015/08/19 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
九年级英语教学反思
2016/02/15 职场文书