jQuery ajax中使用serialize() 方法提交表单数据
jQuery ajax中数据以键值对(Key/Value)的形式发送到服务器,使用ajax提交表单数据时可以使用jQuery ajax的serialize() 方法表单序列化为键值对(key1=value1&key2=value2…)后提交。serialize() 方法使用标准的
URL-encoded 编码表示文本字符串。下面是使用serialize()序列化表单的实例:
$.ajax({
type: "POST",
url: ajaxCallUrl,
data: "Key=Value&Key2=Value2",
success: function(msg){alert(msg);}
});
ajax serialize():
$.ajax({
type: "POST",
url:ajaxCallUrl,
data:$('#formID').serialize(),// 要提交的表单
success: function(msg) {alert(msg);}
});
实例:
jquery mobile + html5 手机app表单跨域提交实例(手机app开发html5 juqery moblie phonegap系列一) 第一次写博文,把学习过程记录下来也留个底,免得以后不用都忘了。 确定用html5 +jquery moblie+ phonegap 框架作为app开发的主框架。一开始在网上找了很多资料,跟着学习了一下,然后下了很多代码, 结果发现一个很大的问题,网上的代码很多都tmd有bug,不知道是不是故意的还是怎么地,让我也走了很多弯路。不多废话开始实战。 1、开发工具的准备: 1.1 、jquery mobile :这个不用下载,直接在你的html文件
中间加上以下代码就行了, 1.2 、html5 : 下载一个支持html5的浏览器就行了,支持的最好的是 Google Chrome ,这个还可以调试js,不错推荐。 1.3 、myEclipse 版本6.0以上就行,自带jdk 和tomcat ,这个写jsp当做服务器用。 1.4 、editplus 这个是文本编辑器,写html代码用的。 这一节的开发工具就准备这些,我们这节只在浏览器上面看效果,下节讲打包发布到安卓手机上面还需要一些东西。 2、开发流程: 2.1 制作提交用户名和密码的html5表单。 2.2 通过jsonp方式跨域提交到tomcat服务器上的jsp文件。 2.3 服务程序返回ok。 3、开发步骤: 3.1 html5文件,用editplus新建一个html文件,名字随便起。然后copy以下代码:web项目前端开发经验总结 最近这一个月完成了自己的第一个java web项目,是给某杂志社做的在线投稿系统,虽然进度很慢,但是中间确实学到了不少东西,深刻体会到了自己看几个月书都不如做一个项目来的实在。这个项目自己主要负责的是JSP页面、JS脚本、CSS样式表的编写,虽然主要做的是前端,但是在设计前端后台交互功能时,对MVC架构和数据库又多了一分了解,这一个月的时间,自己在技术上也确实成长了不少。 下面分成几块总结一下自己的这个项目中的心得吧: 1.项目开发流程:从确认需求开始,到原型设计,再到原型测试,这些都没什么说的了,主要是刚开始开发前端JSP页面时,自己走了很多弯路,想到有什么页面就写什么页面,GET和POST的路径也是随心所欲,想到什么名字就起什么名字,结果发现这样做严重影响了项目开发的进度,后来经过主管的提点后,我幡然醒悟,其实,面向对象的思想就贯穿在整个项目当中,在前面的原型设计的过程中,除了页面的设计还有数据库的设计,数据库的每个表就对应着Java中的每个实体类,这个类封装了数据库中的列作为属性,封装了数据库的增删改查作为方法,就拿这个投稿系统为例,实体主要有用户、稿件等等,实体间还有着一对一映射或者一对多映射等对应关系。其实,整个系统的开发就是围绕着这些个实体进行的,甚至于我们可以把实体名字做为二级目录,把实体的增删改查作为GET或POST 的路径,譬如account/add、paper/delete等等,有了这些路径,那么与之对应的GET和POST的Controller也就有了,接下来我们要做的就是,定义Controller中返回的视图,写完Controller后再把与实体相关的增删改查方法写到服务层中,再把项目的整个骨架搭起来,再去处理细节,很快的,这个项目就成型了。这里前端和后台的配合尤为重要,数据交互是整个系统的核心。 2.JSP页面设计:提到JSP页面,在这里我想说的一点是,其实JSP页面是在服务器生成的,那么传给JSP页面的变量、参数都会在服务器转化为它们具体的值,然后再传给客户端。JSP页面可以实现很多服务器端的功能,因为可以直接在页面嵌入JAVA代码,但是我们必须明确的一点是,JSP页面主要是用来呈现视图的,不要再其中套入大量的代码,要明确前端与后台的分工。 3.JSTL标签:JSTL标签就是JSP standard taglib,即JSP标准标签库,首先,EL表达式可以非常方便的取出Controller返回的View包含的Model,甚至都无需声明EL 表达式。其次,JSTL标签可以实现很多的逻辑控制功能,比如最基本的c:if判断、c:forEach 循环,甚至有更强大的c:choose,有了这些,我们可以大大简化代码量,JSP页面中用几十行java写的代码,有时用几句JSTL标签组合就实现了,此外,像fmt:parseDate和 fmt:formatDate也是很好用的标签,用于日期的解析和格式化,此外JSTL更有强大的函数标签库fn:,项目中我也只用到了fn:length取后台传的list的长度。要善用JSTL标签,但是又不要完全依赖于它,JSTL标签很方便、快捷,但是切记,JSTL功能有限,不要完全依赖于它。 4.shiro框架:shiro框架是apache的一款面向java web项目的权限控制框架,这个框架无论前端、后台都十分好用,在前端,我们可以使用shiro强大的标签库,通过用户角色赋予用户不同的访问权限。譬如,如果一个系统的用户有访客、用户、管理员三种角色,我们就可以通过shiro标签来控制游客不能访问哪些内容,页面向用户和管理员呈现的不同内容,这就是shiro标签的神奇之处。 5.sitemesh框架:这个主要是用来将所有页面套用固定格式,用以页面的复用,其实有些时候标签更为方便,而且sitemesh框架的内存开销是的二倍,还会导致拦截器出现一些莫名的bug,所以并不推荐使用。
PHP jQuery Ajax Form表单提交实例解析,包括创建一个表单html页面、添加JQuery代码、jquery ajax表单提交、jquery ajax表单验证、反馈信息给用户,php ajax 表单验证,php ajax提交表单,php ajax form验证,php ajax提交form。 本实例用到JQuery类库本身的函数和功能,所有表单信息利用PHPMailer类库邮件的形式发送。 1、创建一个表单html页面 表单部分html代码 这里用一个id为contact_form来包含整个包含信息;这是有意义的,稍后在JavaScript与用户交互信息的时候会用到,这里form标签的属性里面既包含了method和action;这个意义其实不大,因为Javascript直接操作DOM,所以没有这两个属性也是可以的;务必要给用户输入的input标签加独立的id,这和第二点原理类似。否则,无法看到正常的效果。 2、添加JQuery代码 这里假设你已经从JQuery官方网站上下载了JQuery基库,然后上传到了你的WEB服务器,并添加到你要使用的网页中。
现在新建一个JS文件 第1行的function()函数与Jquery的document.ready函数用法和功能相同,都是在DOM准备完毕后自动触发。第2行里面是一个单击触发函数click(),需要注意的是,在HTML一页提交按钮上需要放置一个名为“button”的Class,以模拟实现submit 提交表单的功能,从第二点我们可以看出,JQuery可以很好的将结构和逻辑分离。 3、jquery ajax表单验证 在实际应用中,这一步是必不可少的。在用户漏填,错填某个项目时,及时提示。
JavaWeb试题 一.单项选择(共20题,每题2分) 1.HTML的全称是什么( A ) A.HyperText Markup Language B.HyperTest Market Language C.HighTest Markup Language D.HyperText Market Language 2.以下选项中属于行内标签的是(A ) A、 span B、 p C、div D、hr 3.以下说法正确的是( C) A、background-color:设置文字颜色 B、back-corlor设置背景色 C、 background-color:设置背景色 D、 color:设置背景色 4.下列哪一项是CSS 正确的语法(C ) A、 body: color=black B、 {body: color:black} C、 body{color:black} D、 {body:color=black} 5.Http协议的状态码(D)表示文件没有找到
A、200 B、400 C、 500 D、 404 6.Tomcat的端口号可以在(A )文件中修改 A. server.xml B. web.xml C. tomcat.xml D. 不能改 7.在一个表单里,想要用jquery找到指定元素的第一个元素用 ( )实现,第二个元素用( A)实现。 A、first,eq(1) B、first,equ(0) C、first,eq(0) D、fir,eq(1) 8.当一个Servlet首次被请求的时候,服务器首先会调用( D )方法 A、 doGet B、 doPost C、 doInit D、 init 9.在J2EE中,重定向到另一个页面,以下(C)语句是正确的 A、 request . sendRedirect(“http :// www . svse . com . cn”); B、 request . sendRedirect(); C、 response . sendRedirect(“http: // www . svse . com . cn”); D、 response .sendRedirect(); 10.在Servlet中,response.getWriter()返回的是( B ) A、 JspWriter对象 B、 PrintWriter对象 C、 Out对象 D、 ResponseWriter对象 11.Login.jsp为登录页面,表单代码如下:
2、将规则下载初始化js中 $().ready(function() { $("#signupForm").validate({ rules: { firstname: "required", email: { required: true, email: true }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" } }, messages: { firstname: "请输入姓名", email: {jquery.form.js中文API 关键字: jquery.form.js 英文原文:https://www.wendangku.net/doc/bb12663451.html,/jquery/form/#api 表单插件API提供了几个方法,让你轻松管理表单数据和进行表单提交。 ajaxForm 增加所有需要的事件监听器,为AJAX提交表单做好准备。ajaxForm不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。ajaxForm接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options对象。 可链接(Chainable):可以。 实例: Java代码 1$('#myFormId').ajaxForm(); ajaxSubmit 马上由AJAX来提交表单。大多数情况下,都是调用ajaxSubmit来对用户提交表单进行响应。ajaxSubmit接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options对象。 可链接(Chainable):可以。 实例: Java代码 2// 绑定表单提交事件处理器 3$('#myFormId').submit(function() { 4 // 提交表单 5 $(this).ajaxSubmit(); 6 // 为了防止普通浏览器进行表单提交和产生页面导航(防止页面刷新?)返回false 7return false; 8});
formSerialize 将表单串行化(或序列化)成一个查询字符串。这个方法将返回以下格式的字符串:name1=value1&name2=value2。 可链接(Chainable):不能,这个方法返回一个字符串。 实例: Java代码 9var queryString = $('#myFormId').formSerialize(); 10 11// 现在可以使用$.get、$.post、$.ajax等来提交数据 12$.post('myscript.php', queryString); fieldSerialize 将表单的字段元素串行化(或序列化)成一个查询字符串。当只有部分表单字段需要进行串行化(或序列化)时,这个就方便了。这个方法将返回以下格式的字符串:name1=value1&name2=value2。 可链接(Chainable):不能,这个方法返回一个字符串。 实例: Java代码 13var queryString = $('#myFormId .specialFields').fieldSerialize(); fieldV alue 返回匹配插入数组中的表单元素值。从0.91版起,该方法将总是以数组的形式返回数据。如果元素值被判定可能无效,则数组为空,否则它将包含一个或多于一个的元素值。 可链接(Chainable):不能,该方法返回数组。 实例: Java代码
jQuery formValidator使用说明 说明:jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js 脚本于页面的分离。对一个表单对象,你只需要写一行代码就可以轻松实现20种以上的脚本控制。现支持一个表单元素累加很多种校验方式,采用配置信息的思想,而不是把信息写在表单元素上,能比较完美的实现ajax请求。并结合jquery.boxy实现遮罩提示。 一、所需元素 jquery-1.3.2.js (需要jquery-1.3.2以上版本) formValidator.js (表单验证基础js) formValidatorRegex.js (表单验证所需正则js) jquery.boxy.js (遮罩提示js) validator.css (表单验证样式) boxy.css (遮罩提示样式) 二、使用说明 a)使用方法 i.加载所需js和css文件 ii.初始化验证控件 ($.formValidator.initConfig({formid:"form1",onerror:functi on(msg){Boxy.alert("
jQuery formValidator表单验证插件是什么? jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)脚本控制。目前支持5种大的校验方式,分别是:inputValidator(针对input、textarea、select控件的字符长度、值范围、选择个数的控制)、compareValidator(提供2个对象的比较,目前可以比较字符串和数值型)、ajaxValidator(通过ajax到服务器上做数据校验)、regexValidator(提供可扩展的正则表达式库)、functionValidator (可使用外部函数来做校验) 本插件于其他校验控件最大的区别有3点: 1、校验功能可以扩展。 对中文、英文、数字、整数、实数、Email地址格式、基于HTTP协议的网址格式、电话号码格式、手机号码格式、货币格式、邮政编码、身份证号码、QQ号码、日期等等这些控制,别的表单校验控件是代码里写死的,而formValidator是通过外部js文件来扩展的,你可以通过写正则表达式和函数来无限的扩展这些功能。 2、实现了校验代码于html代码的完全分离。 你的所有信息都无需配置在校验表单元素上,你只要在js上配置你的信息。使美工(界面)和javascript工程师的工作不交织在一起 3、你只需写一行代码就能完成一个表单元素的所有校验。你只需要写一行代码就能完成一下所有的控制 ?支持所有类型客户端控件的校验 ?支持jQuery所有的选择器语法,只要控件有唯一ID和type属性 ?支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js,你可以自由的添加、修改里面的内容。 ?支持2种校验模式。第一种:文字提示(showword模式);第二种:弹出窗口提示(showalert模式) ?支持多个校验组。如果一个页面有多个提交按钮,分别做不同得提交,提交前要做不同的校验,所以你得用到校验组的功能。 ?支持4种状态的信息提示功能,可以灵活的控制4种状态是否显示。第一种:刚打开网页的时候进行提示;第二种:获得焦点的时候进行提示;第三种:失去焦点时,校验成功时候的提示;第四种:失去焦点时,校验失败的错误提示。 ?支持自动构建提示层。可以进行精确的定位。 ?支持自定义错误提示信息。
JQuery笔记-表单验证大全
jquery.validate.js 是 jquery 旗下的一个验证插件,借助 jquery 的优势,我们可以迅速验证一些常见的输入 , 并且可以自己扩充自己的验证方法。 举个例子,有这么一个表单: view plaincopy to clipboardprint?