- 浏览: 531484 次
- 性别:
- 来自: 天津
文章分类
- 全部博客 (230)
- java (87)
- c/c++/c# (39)
- ASP.net MVC (4)
- eclipse/visual studio (3)
- tomcat/weblogic/jetty (13)
- linux/unix/windows (20)
- html/javascript/jquery/kendo/bootstrap/layui/vue/react (31)
- hibernate/struts/spring/mybatis/springboot (21)
- lucene/solr/ELK (2)
- shiro (0)
- oracle/sqlserver/mysql/postgresql (23)
- shell/python/ruby (6)
- android (0)
- maven/ant (1)
- freemarker/thymeleaf/velocity (1)
- open source project (41)
- cache/memcached/redis (0)
- nosql/hadoop/hbase/mongodb (0)
- system architecture/dubbo/zookeeper (0)
- software testing (0)
- system optimization (0)
- system security (0)
- tcp/udp/http (2)
- roller/wordpress (2)
- 工具收藏 (8)
- 文摘 (4)
- 生活 (0)
最新评论
-
coconut_zhang:
这个demo 非常完整了,是指下面说的那个html 模版,模版 ...
flying sauser, thymeleaf实现PDF文件下载 -
a93456:
你好,你有完整的demo吗? String template这 ...
flying sauser, thymeleaf实现PDF文件下载 -
yujiaao:
fn 函数循环是没有必要的啊,可以改成
protecte ...
Java 笛卡尔积算法的简单实现 -
安静听歌:
设置了.setUseTemporaryFileDuringWr ...
使用jxl导出大数据量EXCEL时内存溢出的解决办法 -
q280499693:
写的很详细,但是我现在想知道他们是怎么定位log4j.prop ...
关于SLF4J结合Log4j使用时日志输出与指定的log4j.properties不同
JQuery ajax提交表单及表单验证
注:经过验证,formValidator只适合一个页面不超过一个表单的情况。
本例实现功能:通过ajax提交表单,并在提交表单前对表单的数据进行验证。
主要通过两个插件实现:
第一个:
jQuery Form Plugin
http://jquery.malsup.com/form 主要功能是ajax提交表单
第二个:jQuery formValidator 国产强大的表单验证插件。
http://www.cnblogs.com/wzmaodong
最简单的例子如下:
- <html>
- <head>
- <title>Form</title>
- <!-- 引入jQuery -->
- <script src="<?php echo base_url()?>style/jquery.js" type="text/javascript"></script>
- <!-- 引入jQuery formValidator -->
- <link type="text/css" rel="stylesheet" href="<?php echo base_url()?>style/form_valide/style/validator.css"></link>
- <script src="<?php echo base_url()?>style/form_valide/formValidator.js" type="text/javascript" charset="UTF-8"></script>
- <script src="<?php echo base_url()?>style/form_valide/formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>
- <!-- 引入jQuery Form Plugin -->
- <script type="text/javascript" src="<?php echo base_url()?>style/ajax_form/jquery.form.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- //提供回调函数,提供提交返回结果的处理
- var options = {
- success:function(data) {
- alert(data);
- }};
- //初始化验证插件,如果提交出错,则弹出对话框,如果正确,则通过ajax提交表单请求。
- $.formValidator.initConfig({
- formid:"form1",
- onerror:function(msg){alert(msg)},
- onsuccess:function(){$('#form1').ajaxSubmit(options); return false;}
- });
- //表单验证
- $("#test1").formValidator({
- onshow:"请输入用户名,只有输入\"maodong\"才是对的",
- onfocus:"用户名至少6个字符,最多10个字符",
- oncorrect:"该用户名可以注册"})
- .inputValidator({min:6,max:10,onerror:"你输入的用户名非法,请确认"})
- .regexValidator({regexp:"username",datatype:"enum",onerror:"用户名格式不正确"});
- });
- </script>
- </head>
- <body>
- <form action="<?php echo site_url("welcome/post")?>" method="post" name="form1" id="form1">
- <td align="right">用户名:</td>
- <td><input type="text" name="test1"id="test1" style="width:120px" value="maodong" /></td>
- <td><div id="test1Tip" style="width:250px"></div></td>
- <input type="submit" name="button" id="button" value="提交" />
- </form>
- </body>
- </html>
success回调函数不执行,可能是请求时候出错了。调用success方法之前尝试着把服务器返回的数据解析成dataType格式,试一下 error:function(XMLResponse){alert(XMLResponse.responseText)}。
如:
var options={
target:'#output1', //把服务器返回内容放入id为output1的元素中
beforeSubmit:showRequest, //提交前的回调函数
success:showResponse, //提交后的回调函数
error:function(XMLResponse){alert(XMLResponse.responseText)},
//url:url, //默认是form的action,如果申明,则会覆盖
//type:type, //默认是form的method('get' or 'post'),如果申明,则会覆盖
//dateType:null, //'xml','script',or 'json'(接受服务端返回的类型)
//clearForm:true, //成功提交后,清除所有表单元素的值
//resetForm:true, //成功提交后,重置所有表单的值
//timeout:3000 //限制请求的时间,当请求大于3秒后,跳出请求
}
ajaxForm 和 ajaxSubmit 的选项
除了以下列出的选项,你也可以给这两个函数传递标准$.ajax的选项。
target ———— 指定页面中的哪些元素用于响应服务器端的更新。这个值可以是jQuery查询字符串,或者它指定的jQuery对象,或者是DOM元素。默认值:null
replaceTarget ———— 配合target选项使用。当被设置为true时,target指定的部分将被替换,否则只替换它的内容。默认值:false
url ———— 指定数据要提交到的URL。默认值:表单的action属性值
type ———— 指定表单提交的方式:’GET’或者’POST’。默认值:表单的method属性值(若无则为’GET’)
data ———— 要同表单一起提交的额外数据,格式:data: { key1: ‘value1′, key2: ‘value2′ }
dataType ———— 服务器响应的数据类型,值可以为:null, ‘xml’, ‘script’, 或者’json’。这个选项指定服务器端的响应如何处理。它直接映射到了jQuery.httpData方法。如果dataType为’xml’,则服务器的响应将被看成是XML,’success’回调函数将被传入responseXML的值。如果dataType为’json’,则服务器的响应将被看成是JSON对象(通过eval),并传给’success’回调函数。如果dataType为’script’,则服务器的响应将被eval成全局上下文。默认值:null
beforeSerialize ———— 表单序列化前的回调函数。它提供了一个机会以在值被获取前控制表单。其中的一个参数是表单的jQuery对象,另一个是传给ajaxForm/ajaxSubmit的选项对象。默认值:null
beforeSerialize: function($form, options) {
// 返回false将取消提交操作
}
beforeSubmit ———— 表单提交前的回调函数。一般用于处理表单提交前的逻辑,如验证表单数据。如果这个回调函数返回false,提交操作将被取消。它的三个参数分别是表单数据组成的数组,表单的jQuery对象,传给ajaxForm/ajaxSubmit的选项对象。默认值:null
beforeSubmit: function(arr, $form, options) {
// 第一个参数的格式:
// [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
// 返回false将取消提交操作
}
success ———— 表单被成功提交后,服务器端产生响应时的回调函数。它将被传入以下参数:
1. responseText 或者 responseXML 的值(取决于dataType选项的值)
2. statusText
3. xhr(XMLHttpRequest对象)(若jQuery的版本小于1.4,则为jQuery封装过的表单元素)
4. jQuery封装过的表单元素(若jQuery的版本小于1.4,则为undefined)
默认值:null
semantic ————— 指定提交的数据是否遵循语义上的顺序(较正常方式慢)。注意一般情况下表单的序列化都遵循语义上的顺序,除非有image类型的控件。只有当服务器对提交的数据的语义上的顺序有严格要求而且表单含有image类型的控件时才设置为true。默认值:false
resetForm ———— 当成功提交时是否重置表单。默认值:null
clearForm ———— 当成功提交时是否清除表单。默认值:null
iframe ———— 是否总是将服务器的响应放在iframe里面。默认值:false
iframeSrc ———— 如果iframe选项为true,则要添加到iframe中的src属性。默认值:about:blank,使用https协议的页面的默认值为:javascript:false
forceSync ———— 指定是否在上传文件或者使用iframe选项提交表单时去除短时间的延迟。这个延迟用于浏览器在进行原始的提交操作前渲染DOM。通过它给用户提示如”请稍候”,这改善了可用性。默认值:false
选项示例:
// 准备选项对象
var options = {
target: '#divToUpdate',
url: 'comment.php',
success: function() {
alert('Thanks for your comment!');
}
};
// 把选项对象传递给ajaxForm函数
$('#myForm').ajaxForm(options);
- jquery.form.js中文API.rar (8.3 KB)
- 下载次数: 82
发表评论
-
logback的使用和logback.xml详解
2017-03-09 11:20 2133一、logback的介绍 Logback是由log4j ... -
jquery formValidator 表单验证插件, ajax无法传值到后台问题的解决
2016-06-24 17:10 609data : { count: Math.random ... -
thymeleaf与spring整合
2016-06-15 10:08 11831、使用的是Spring EL而不是Ognl。2、访问上下文 ... -
SpringMVC 400 Bad Request 问题
2016-06-15 09:11 1906在提交表单时,发生400错误,并未进入save方法。 ... -
bootstrap3自定义popover显示的内容
2016-05-27 11:14 1076<script type="text/jav ... -
JS 中面向对象的5种写法
2015-08-13 15:54 644定义Circle类,拥有成员变量r,常量PI和计算面积的成员 ... -
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2015-07-31 15:09 4076动态载入 JavaScript/Csss 文件 传统加载外部 ... -
Java_Ant详解
2015-06-15 16:54 6881,什么是antant是构建工 ... -
httpClient通过代理(Http Proxy)进行请求
2014-09-16 14:18 1156httpClient通过代理(Http Proxy)进行请求 ... -
httpclient上传文件及传参数
2014-09-16 11:07 11511用到的包有commons-httpclient-3.0.1. ... -
简单返回顶部代码及注释说明
2014-07-16 10:44 911最近做了一个排行榜页 ... -
深入浅出JSONP:解决AJAX跨域问题
2014-04-16 11:00 771取不到数据! 上周客户新买了服务器,原本在旧的服务器上放着 ... -
Progress Bar Plugin
2013-12-26 10:04 786from: http://digitalbush.com/p ... -
javascript cookie
2013-11-08 09:18 1005cookie概述在上一节, ... -
plupload实现多图片上传
2013-07-19 16:12 23197最近发现一个非常牛的上传组件(http://www.plu ... -
调用axis2 WebService三种方法
2013-06-28 13:41 1743第一:简单的使用axis2包自己实现调用 package ... -
java-jsch实现sftp文件操作
2013-06-26 13:55 3615(曾在天涯)的文章详细讲解了jsch中的函数以及用法 ht ... -
url encode的问题
2012-11-06 08:27 58911.urlencode和decode 字符的编码和解码在有中 ... -
通过Class Name获取一个对象的数组
2012-09-24 10:42 3897DOM 提供了一个名为 getElementById() ... -
Lucene3.0 初窥(转载)
2012-08-04 21:38 958【Lucene3.0 初窥】全文检索的基本原理 ...
相关推荐
该资源包含了一个使用jquery提交表单的代码,简单易懂,喜欢的下载。
利用jquery的ajax提交表单数据到后台。后台使用spring.
用Jquery的Ajax提交整个表单,我用的1.3.2的版本。
表单进行无刷新提交,ajax技术 if (!this.length) { log('ajaxSubmit: skipping submit process - no element selected'); return this; } var method, action, url, $form = this; if (typeof options == ...
jquery ajaxfrom表单提交代码,里面有两个js文件选择任意一个就可以了
Ajax使用jQuery提交表单 文件
jquery Ajax表单输入检测验证一例 jquery Ajax表单输入检测验证一例
jquery表单验证Ajax提交.zip
ajax表单验证,无刷新提交表单,并发送邮件通知
在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法。$get方式提交表单get() 方法通过远程HTTP ,下面我...
本文实例讲述了jQuery ajax提交Form表单的方法。分享给大家供大家参考,具体如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等。 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移...
Ajax表单提交插件jquery form
jQ顶部下拉ajax验证表单 jQuery顶部下拉ajax验证表单代码下载.zip
使用jQuery.form插件,实现完美的表单异步提交
jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传.
Ajax使用jQuery提交表单
jQuery check_expression表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论...
PHP+Jquery+AJAX POST,GET提交表单并接收返回
php+jquery+ajax最简单例子
Form Of Notifications一款来自国外的 jquery Ajax表单输入检测验证一例,如果输入有错误当即给出提示,表单并不能提交,体升用户体验的好方法,Ajax一定要学习一下哦,jQuery是实现Ajax的快速平台,有必要掌握哦。