禁止表单多次提交
<!--此特效来源来互联网,由https://www.doczj.com/doc/6b7395122.html, 收集整理--> <!--禁止表单多次提交-->
<h4>禁止表单多次提交,表单提交一次后提交键变灰色</h4>
<script>
function submitonce(theform){
//if IE 4+ or NS 6+
if (document.all||document.getElementById){
//screen thru every element in the form, and hunt down "submit" and "reset"
for (i=0;i<theform.length;i++){
var tempobj=theform.elements[i]
if(tempobj.type.toLowerCase()=="submit"||tempobj.type.to LowerCase()=="reset")
//disable em
tempobj.disabled=true
}
}
}
</script>
<form method="POST" onSubmit="submitonce(this)"> <input type=input name="asdf">
<input type=submit name="OK">
</form>
1. 利用javascript :
1.1 document.form1.submit();后加
document.body.innerHtml = "<center> Waiting...</center>"; //当然这里的html代码就由你发挥了,还可把这段写成函数,这样维护就方便了!这一处理,就让用户在等待提交时不会误以为没提交而重复按提交按钮!
1.2 按钮设置
<SCRIPT LANGUAGE="JavaScript">
function changesubmit()
{
document.aa.B1.disabled = "true";
}
</script>
……
<form method="POST" action="aa.jsp" name="aa"
onSubmit="return changesubmit()">
…………
<input type="submit" value="答题完毕" name="B1"> <input type="reset" value="重做" name="B2">
</form>
2. 利用继承制作防止重复提交按钮
我们浏览很多论坛发表帖子时,单击“发表”按钮,这个按钮就会变成灰色,并且还有提示如“正在提交,请稍候...”等,这样做一方面让用户看到效果,避免长时间等待网页的烦躁,另一方面又防止了重复提交。在.NET中没有类似的功能,不过我们已经知道他就是一个普通按钮的基础上多加了一个功能而以。在.NET中,我们可以巧妙利用类的继承来制作这种按钮。
这里我是用C#语言作为范例,其他语言可以举一反三得到应用,这里不再赘述。我们需要自己写一个类,这个类继承自System.Web.UI.WebControl.Button:
public class ClickOnceButton :
System.Web.UI.WebControl.Button
我们知道要实现这种功能需要借助JS脚本,.NET的控件提供了一个Attributes属性用来添加任何想要的客户端属性。我们需要在客户端的onclick中写入:this.disabled=true,来
达到使按钮变灰,另外,再用一句:this.value="正在提交,请稍候...",来使的按钮的文字改变。
把插入脚本这一动作放在了控件加载的时候进行。因此,我们重写OnLoad方法:
protected override void OnLoad(EventArgs e)
{
this.Attributes.Add("onclick","this.disabled=true;this.value= \"正在提交,请稍候...\"");
base.OnLoad (e);
}
上面这句向客户端属性中onclick添加了这些语句。记得重写函数是不要忘记最后要调用基类的OnLoad方法。编译,然后就可以在网页上使用了。你可以作为一个单独的控件库项目来写这个东西,然后从工具箱上添加上,把他们拖动到网页中,就可使用了。大家还可以扩充一些实用的功能。具体控件的编程美化等等细节此处不再赘述。
4. 防止重复提交JAVA 解决
1、当用户进行的是Refresh/Reload/Back/Forward操作、以及先Back再Submit操作时,仅仅是reloading先前的结果
页。
2、当用户重复提交同一个任务操作时,后台服务接收并处理第一次提交的任务,后面提交不起作用(不转向也不提示)。
3、该功能具有公用性。
基本形成思路:
(1)、在basic filter中实现公用性
if(true){//问题1:如何确定是否为重复提交
...
chain.doFilter(request,response);
}else{
//问题2:如何实现不转向、不提示也不显示空白页
}
(2)、网上资料概括
a、提交表单后按钮变灰/隐藏提交按钮
b、在js里设置全局变量,提交后修改该变量的值,依据变量的值判断是否重复提交
var flag=true;
function checkForm(){
if (flag==false){
return;
}
flag=false; document.form1.submit();
}
c、struts (webwork没有找到这个资料)
//验证事务控制令
牌,<html:form >会自动根据session中标识生成一个隐含input代表令牌,防止两次提交
在action中:
//<input
type="hidden"
name="org.apache.struts.taglib.html.TOKEN"
value="6aa35341f25184fd996c4c918255c3ae">
if
(!isTokenValid(request))
errors.add(ActionErrors.GLOBAL_ERROR,
new ActionError("error.transaction.token"));
resetToken(request); //删除session中的令牌
action有这样的一个方法生成令牌华
protected String generateToken(HttpServletRequest request) {
HttpSession session = request.getSession();
try {
byte id[] = session.getId().getBytes();
byte now[] =
new
Long(System.currentTimeMillis()).toString().getBytes();
MessageDigest
md = MessageDigest.getInstance("MD5");
md.update(id);
md.update(now);
return
(toHex(md.digest()));
} catch (IllegalStateException e) {
return (null);
} catch (NoSuchAlgorithmException e) {
return (null);
}
}
d、用户使用浏览器时,可以经常使用向后的按钮,因此就有可能重复提交一个他们已经提交过的form,这样就会带来一个重复事务处理的问题。同样,一个用户也可能在接收到一个确认的页面之前按下停止的按钮,接着再次提交同一个form。对于这些情况,我们都想跟踪并且禁止这些重复的提交,我们可以使用一个控制servlet来提供一个控制点,以解决这个问题。
同步记号(Synchronizer (or Dvu)
Token)
这个策略是为了解决重复的form提交问题。一个同步的记号被设置在一个用户的Session中,并且包含在返回到客户的每一个form中。当form被提交时,form中的同步标记就和Session中的同步标记作对比。在form首次提交的时候,这两个标记应该是一样的。如果标记不一样,那么该form就会禁止提交,一个错误就会返回给用户。在用户提交一个form时,如果按下浏览器中的后退按钮并尝试重新提交同一个form时,标记就会出现不匹配的现象。
另一方面,如果两个标记值匹配,那么我们就可以确信整个流程是正确的。在这种情况下,
5. 如何防止用户重复提交数据
简单的解决方案:
最简单的方式就是当用户提交之后,在你的服务器端控件的代码中使用Response.Redirect("selfPage")语句。但是大多的数包括我都不使用这种方法。
多次提交:
请注意:这篇文章并不是有关如何防止在一个页面中多次提交。这篇文章是教你在提交了请求之后如何防止页面进行刷
新。情况是这样的,当用户提交了按钮之后,最终用户就不能再点击提交按钮了。但是这样最终用户仍然可以通过点击浏览器的刷新按钮来提交数据。如果要防止多次提交你可以去https://www.doczj.com/doc/6b7395122.html,/网上找一些资料,它那里有一个提交控件可以用。
常规的解决方案
习惯的解决方法是存储Session的ID和当提交时ViewState 中存储的SessionID相比较来防止用户刷新屏屏幕。前提你的程序中允许了自动回发,如果不是的话,就得在hidden field存储这个变量了。下面给出一个典型的例子。在
Page_Load事件中你存储了第一次提交时的SessionID和一个时间戳。
protected System.Web.UI.WebControls.Button SubmitButton;
protected https://www.doczj.com/doc/6b7395122.html,bel RefreshID; private void Page_Load(object sender, System.EventArgs e)
{
if (RefreshID.Text.Length == 0)
{
RefreshID.Text =
Session.SessionID+DateTime.Now.Ticks.ToString();
}
}
private void Button1_Click(object sender,
System.EventArgs e)
{
string sesToken = (string)
Session[FrameworkConst.SYNC_CONTROL_KEYWORD]; string pageToken = RefreshID.Text;
if (sesToken != null && sesToken != pageToken)
{
Response.Write("The Refresh was performed after submit.");
}
else
{
// do your processing here to avoid Refresh trap
Response.Write("The processing is done here. Disabling submit
button so that user can not perform multiple submit.");
Response.Write("But still user can peform Refresh on page.");
}
Session[FrameworkConst.SYNC_CONTROL_KEYWORD] =
Session.SessionID+DateTime.Now.Ticks.ToString();
RefreshID.Text = sesToken;
SubmitButton.Enabled = false;
}
不同的解决方案:
幸运的事,https://www.doczj.com/doc/6b7395122.html,提供了一些更简单的方法。上面的解决方案的缺点是我们要在控钮的事件中自己决定一些逻辑问题。设想一下,如果在你的解决方案中有成百个要提交的页面,你就得写上许多个这样的逻辑。自定义web控件和HTTP MOdules提供了相同的解决法。你可以将这个控件入在你需要控制的页面上,它就可以起作用了。当然,并不是所有的情况都需要的,比如说搜索页面是允许用户刷新的。但是,在页面中有插入、更新、删除数据库的操作时,控制刷新按钮是绝对有必要的。
下面来看一下上面的方案是如何工作的。
第一步:需要在System.web节中注册HTTP Module模块。
<httpModules>
<add name="SyncHttpModule"
type="EAD.Controller.SyncHttpModule, sync"/>
</httpModules>
第二步:要在控制页的页面内放入我们开发好的控件。
工作原理:
它的工作原理和前面普通讲的是差不多的。只是这里提供了一个通用的方法。这里提供了一种通用的方式。在我看来,如果你有一些好的模式,将大大的加快你的开发速度。
我们需要在第一次提交时在Session中存储标记,并在请求时比较它们是否不同。通过HTTP handler,我们在Session 中存储标记。有这样的一个事件PreRequestHandlerExecute 我们可以通过它找到Session,如果是其它事件的话Session是不存在的,比如BeginRequest 事件。在这个事件中比较两者的值,如果不同则证明是Refresh事件。这时你可以添加自己的处理方法,我一般是将转向一个页面告诉用户不能反复提交。
private void OnPreRequestHandlerExecute(object source, EventArgs e)
{
HttpContext context = ((HttpApplication)
source).Context;
string _keyword =
FrameworkConst.SYNC_CONTROL_KEYWORD;
string sesToken = (string)
context.Session[_keyword];
string reqToken =
context.Request.Params[_keyword];
//如果没有提交过,则保存Session和标记值
if(reqToken !=
FrameworkConst.BYPASS_SYNC_KEYWORD)
{
context.Session[_keyword] =
context.Session.SessionID+DateTime.Now.Ticks.ToString ();
}
if(reqToken != null && reqToken != sesToken)
{
string
path=context.Request.ApplicationPath+
&"/Common/SyncControl.aspx?returnUrl="+
&context.Request.Url.AbsolutePath;
context.Server.Transfer(path);
}
}
SyncControl 控件将建立一个hidden input field 将在HTTP module中设置的Session保存起来。
HttpModule和Http Handler (比较与区别)
https://www.doczj.com/doc/6b7395122.html,/chengfong/archive/2009/04/17/408853 0.aspx
表单 表单form是Internet和服务器之间进行信息交流的一种重要工具。包括按钮、文本框、单选按钮、复选按钮等,它们被称之为表单对象。表单的使用包括两部分:一是用户界面,提供用户输入数据的元件;另一部分是处理程序,可以是客户端程序而在浏览器执行,也可以是服务器程序,处理用户提交的数据,返回结果。 一.可插入的表单对象 Dreamweaver中,在“插入”面板中,有一个“表单”分类,选择该分类,可插入的表单对象快捷按钮就会出现。如下图: 可插入的对象,从左至右,包括: ?表单 ?文本字段 ?隐藏域 ?文本区域 ?复选框 ?单选按钮 ?单选按钮组 ?列表/菜单 ?跳转菜单 ?图像域 ?文件域 ?按钮 1.插入表单域 要在网页中插入表单对象,首先应该插入一个表单域,否则服务器将无法处理用户填写的信息。操作步骤如下: 步骤1:“插入”面板中,选择“表单”分类,单击左边第1个“表单”按钮,随即插入到网页中一个表单域,表单域在设计视图中显示为一个红色虚线框的范围。如图所示: 如果没有红色虚线框,执行菜单栏“查看/可视化助理/不可见元素”命令即可。 步骤2:设置表单域属性。使用鼠标单击虚线的边框,此时虚线框内出现黑色区域,表示该表单域被选中,属性面板如下: 表单域属性面板包括:
?表单名称:标识表单的唯一名称。 ?动作:指定处理该表单的动态页或脚本的路径。可以键入完整的路径,也可以单击“浏览文件”按钮指定到同一站点中包含该脚本或应用程序页的相应文件夹。如果没有相关程序支持的话,也可以使用E-mail的方式来传输表单信息,这种方式在动作文本框中键入:“mailto:电子邮件地址”。表示提交的信息将会发送到作者的邮箱中。比如 ?方法:用于选择表单数据传输到服务器的方法。可选择速度快但携带数据量小的GET方法,或者数据量大的POST方法。一般使用POST方法。 ?目标:指定打开窗口的方式。 ?MIME类型:指定对提交给服务器进行处理的数据使用MIME编码类型。 ?类:定义好的CSS样式。 2.插入文本域 当浏览者浏览网页需要输入文字资料时,像姓名、地址、E-mail或稍长一些的个人介绍等栏目,在制作时就可以使用文本域,它在浏览器中将显示为一个文本框。 具体操作如下: 步骤1:插入文本域前请确定首先插入了一个表单域,并且将光标放入表单域中。如果在表单域外插入文本域,Dreamweaver会弹出提示框,是否创建一个表单域。 步骤2:在“插入”面板中,选择“表单”分类,单击左边第2个“文本字段”按钮,随即插入到网页中一个文本域。可以在文本域前加入说明的文字,如“用户名”,告知浏览者需要填入的内容的类型。 步骤3:单击文本域,对文本域的属性面板进行设置: 文本域:输入文本字段的名称,该名称在该网页中是唯一的名称。名称不能包含空格或 特殊字符,可以使用字母数字字符和下划线的任意组合。 字符宽度:设置文本域中最多可显示的字符数。 最多字符数:设置单行文本域中所能输入的最多字符数。如果是空白,则可以输入任意 数量的文本。(最好对不同内容的文本域进行不同数量的限制,防止个别浏览者恶意输入大量数据,维护系统的稳定性。) 初始值:输入文本域中默认状态时显示的内容,当浏览者键入资料时初始文本被替代。 类型:显示了当前文本域的类型,包括“单行”、“多行”和“密码”。其中, ---单行是默认选项,只显示一行文本。 ---多行表示插入的文本可显示多行(如图)。
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以下代码: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表单验证 在实际应用中,这一步是必不可少的。在用户漏填,错填某个项目时,及时提示。
实验3.8 表单的应用 【相关知识】 1. 表单是用于申请或提交某些信息而填写的交互网页,属于网页动态元素。它是网站 管理者与浏览者之间沟通的桥梁。 2. 表单域是具有相互联系的、能够完成一定功能的表单对象的集合。一个网页中可有 多个表单域。 3. 表单对象指表单域中专门处理用户输入数据的元素。表单对象一般都添加在表单域 中。网页中的表单对象包括文本域、单选按钮、复选框、下拉列表、按钮等。 4. 表单不能嵌套,但是一个网页中可以有多个表单。 5. 提交表单的方法有两种:POST和GET。POST方法将在HTTP请求中嵌入表单数据, 通常用来传送大量数据。GET方法将表单数据附加在请求页面的URL地址后面,通常用来传送少量数据。 一、实验目的和要求 掌握使用表单设计新用户注册页面的方法。页面的设计效果如图3-8所示。 图3-8 “新用户注册”页面的效果图
二、实验步骤 1. 新建一个网页文档 启动Dreamweaver。单击【文件】→【新建】菜单命令,新建一个网页文档。 2. 插入表单域 (1)将光标放在网页上要插入表单域的位置。 (2)单击【插入】→【表单】→【表单】菜单命令,或者打开【表单插入栏】,单击上面的【表单】按钮。在网页中插入表单域。 3. 插入表格 (1)将光标放在表单域中,单击【文件】→【表格】菜单命令,打开【表格】对话框。 (2)在对话框中,设置【行数】为“13”;设置【列数】为“2”;设置【表格宽度】为“600像素”;单击【确定】按钮。插入一个13行2列的表格。 (3)选中该表格。在属性面板的【对齐】下拉列表中选择“居中对齐”。 4. 添加表单对象 (1)将光标放在第1行第1列的单元格中。单击【插入】→【表单】→【文本域】菜单命令,或者单击【表单插入栏】上面的【文本字段】按钮,插入一个文本域。在【输入标签辅助功能属性】对话框的【标签文字】文本框中输入“会员号”。选中该文本域,在属性面板中,设置【字符宽度】为“20”;设置【最多字符数】为“20”;在【类型】处选择“单行”。将光标放在第1行第2列的单元格中,输入文字“(必填)”。 (2)将光标放在第2行第1列的单元格中。单击【插入】→【表单】→【文本域】菜单命令,或者单击【表单插入栏】上面的【文本字段】按钮,插入一个文本域。在【输入标签辅助功能属性】对话框的【标签文字】文本框中输入“密码”。选中该文本域,在属性面板的【类型】处选择“密码”;设置【字符宽度】为“10”;设置【最多字符数】为“10”。将光标放在第2行第2列的单元格中,输入文字“(必填)”。 (3)将光标放在第3行第1列的单元格中。输入文字“性别”。单击【插入】→【表单】→【单选按钮】菜单命令,或者单击【表单插入栏】上面的【单选按钮】按钮,插入一个单选按钮。在【输入标签辅助功能属性】对话框的【标签文字】文本框中输入“男”。 用同样的方法插入另一个单选按钮。在【输入标签辅助功能属性】对话框的【标签文字】文本框中输入“女”。 (4)将光标放在第4行第1列的单元格中。单击【插入】→【表单】→【列表/菜单】菜单命令,或者单击【表单插入栏】上面的【列表/菜单】按钮,插入一个列表/菜单。 在【输入标签辅助功能属性】对话框的【标签文字】文本框中输入“常住地点”。选中该列表/菜单对象,在属性面板的【类型】处选择“列表”;设置【高度】为“2”;选中【允许多选】复选项。单击【列表值】按钮,打开【列表值】对话框。单击按钮,输入如表3-3所示的“常住地点”列表值数据。 表3-3 “常住地点”列表值数据 项目标签值 北京 1 上海 2 天津 3 广东 4
第八章表单 表单是网页中提供的一种交互式操作手段,在网页中的使用十分广泛。无论是提交搜索的信息,还是网上注册等都需要使用表单。用户可以通过提交表单信息与服务器进行动态交流。表单主要可以分为两部分:一是用HTML源代码描述的表单,可以直接通过插入的方式添加到网页中;二是提交后的表单处理,需要调用服务器端编写好的脚本对客户端提交的信息作出回应。 1 表单的概念 表单通常用来做调查表、注册登录界面、搜索界面等。通过表单收集到的用户反馈信息,通常是以某种分隔符分隔的文字形式提交到服务器。 表单使用的
之间的部分就是一个表单。 表单form基本语法: ?name:给定表单名称,表单命名之后就可以用脚本语言(如JavaScript 或VBScript)对它进行控制。 ?action:指定处理表单信息的服务器端应用程序。 ?method:用于指定表单向服务器提交数据的方法,method的值可以为get或是post,默认方式是get。 (1)get方法,使用get方法提交数据,浏览器将把表单中的各个值添加 到action指定的URL后(这两者之间用问号进行分隔)并向服务器发 送get请求,每个值之间用符号“&”链接。 (2)post方法,如果采用post方法,浏览器将首先与action属性中指定 的表单处理程序建立联系,一旦建立连接之后,浏览器就会按分段 传输的方法将数据发送给服务器。 (3)get将表单中的数据按照“变量=值”的形式,添加到action所指向 的URL后面,并且两者使用“?”连接,而各个变量之间使用“&” 连接;post是将表单中的数据放在表单的数据体中,按照变量和值相 对应的方式,传递到action所指向的URL。 (4)get是不安全的,post的所有操作对用户来说都是不可见的。 (5)post可以传输大量的数据,所以在上传文件时只能使用post。 (6)get是表单的默认方法。 2 输入 是个单标记,它必须嵌套在表单标记中使用,用于定义一个用户的输入项。 格式:JQuery提交表单Form.js官方插件介绍 Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用。 1、JQuery框架下载 https://www.doczj.com/doc/6b7395122.html,/ 2、Form插件下载 https://www.doczj.com/doc/6b7395122.html,/jquery/form/#download 3、Form插件的简单入门 第二步:jquery.js和form.js文件的包含
表单插件API提供了几个方法,让你轻松管理表单数据和进行表单提交。 ajaxForm 增加所有需要的事件监听器,为AJAX提交表单做好准备。ajaxForm不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。ajaxForm接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options对象。 可链接(Chainable):可以。 实例: $('#myFormId').ajaxForm(); ajaxSubmit 马上由AJAX来提交表单。大多数情况下,都是调用ajaxSubmit来对用户提交表单进行响应。ajaxSubmit接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options对象。 可链接(Chainable):可以。 实例: // 绑定表单提交事件处理器 $('#myFormId').submit(function() { // 提交表单 $(this).ajaxSubmit(); // 为了防止普通浏览器进行表单提交和产生页面导航(防止页面刷新?)返回false return false; }); formSerialize 将表单串行化(或序列化)成一个查询字符串。这个方法将返回以下格式的字符串:name1=value1&name2=value2。 可链接(Chainable):不能,这个方法返回一个字符串。 实例: var queryString = $('#myFormId').formSerialize(); // 现在可以使用$.get、$.post、$.ajax等来提交数据 $.post('myscript.php', queryString); fieldSerialize
jquery.form 提交中文时乱码(GBK 乱码)的解决方案 分类:jQuery2009-11-18 21:58 1758人阅读评论(0) 收藏举报 在使用jsp开始时,一不小心就会出现中文乱码的情况。通常可以使用如下方法解决: 第一种解决方法: 从jsp到servlet统一使用utf-8编码.全部使用utf-8编码能省去很多麻烦,但一点不足是utf-8编码对汉字是使用3-4个字节,会加大网络传输量。 第二种方法: 1.jsp页面使用GBK 2.使用servlet过滤器设置request.setCharacterEncoding("GBK");google一下就能找到很多怎么使用过滤器转换编码。 以上两种方法能解决大部分的乱码问题,特别是第一种方法,能解决使用ajax提交时的中文乱码问题。如果采用第二种方法,那么在使用ajax提交表单时仍然会有中文乱码。这是因为ajax方式提交时js使用的是utf-8的编码,过滤器使用gbk进行转码就不正确了,应该使用utf-8进行转码。要解决这个问题,网上也有很多个版本,其中一个是我曾经采用的在客户端使用encodeURI,然后再在服务器端进行URLDecoder.decode,这种方案在偶尔处理一下中文是可行的,但是如果页面有大量数据录入,那么这种方案是不可行的。有没有好的解决方法呢?在经过新一轮的google之后,还是找到了方法。参考 https://www.doczj.com/doc/6b7395122.html, /topic/157698?page=1。原理就是根据httpheader中的内容来区分是ajax方式请求还是普通的请求。在jquery1.2.6中,ajaxSettings默认设置contentType 为"application/x-www-form -urlencoded",在ajax方法中设置 xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");,我们只要在servlet中根据这两个参数值来判断是不是通过xmlhttprequest发起的请求。这里值得一提的是jquery 在提交form 时对参数进行了encodeURIComponent调用,参见param方法 [javascript]view plainc opy 1.jQuery .each( a, function(){ 2. s.push( encodeURIComponent(this .name) + "=" + encodeURIComponent( thi s .value ) ); 3.});
jquery.form.js中文API 关键字: jquery.form.js 英文原文:https://www.doczj.com/doc/6b7395122.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代码
第一节 HTML表单提交数据和JSP获得数据 为了学习掌握JSP动态网页的设计开发,我们先从大家比较熟悉的表单入手。以前在学习静态网页设计时,做好的表单无法提交数据,那是因为没有接收数据的程序。本节使用一组范例,由HTML的表单提交数据,并使用JSP动态网页获得数据,来说明他们之间的关系和工作原理。 一、范例的演示和代码清单 演示的前提: 1.配置好开发运行环境; 2.将随书光盘中的范例ch2,复制到resin2.1.6\doc文件夹内; 3.启动JSP引擎; 演示步骤: 1.启动IE,在地址栏键入http://127.0.0.1:8080/ch2/ch2-1.htm,如图2-1所示: 图2-1 2.在表单的姓名栏键入“张三”,年龄栏键入“21”,性别选择其中的一项,密码栏 键入“123”,然后点击“提交”按钮。屏幕出现2-2所示界面:
图2-2 注意:访问动态网页必须在启动JSP引擎后,在IE的地址栏键入IP地址和路径文件名,才能进行访问,不能使用直接双击打开的方式。 网页的页面上显示了所提交数据的全部内容。请注意,地址栏上的内容是:http://127.0.0.1:8080/ch2/ch2-1.jsp。这说明提交的数据已被ch2-1.jsp动态网页接收,并将其送到屏幕上进行显示。 当然,可以在表单中填写其他的内容,屏幕显示的内容会随之变化。但是如果在“年龄”项目中填写的不是数字,而是字母、汉字等不正确的内容,屏幕上也会将这些错误内容显示出来,甚至任何一项都不填写,直接点击“提交”按钮,动态网页仍能正常运行。这些问题,我们会在以后的章节中去一一解决。目前先要弄清HTML静态网页和JSP动态网页之间的关系。 两个网页的代码如下: 范例ch2-1.htm 1) 2)
3) 4)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种状态是否显示。第一种:刚打开网页的时候进行提示;第二种:获得焦点的时候进行提示;第三种:失去焦点时,校验成功时候的提示;第四种:失去焦点时,校验失败的错误提示。 ?支持自动构建提示层。可以进行精确的定位。 ?支持自定义错误提示信息。
Java中,当表单含有文件上传时,提交数据的如何读取 当提交表单里包含文件上传的时候,即Form的enctype属性值为multipart/form-data时,后台是无法像普通表单那样通过request.getParameter来获取用户提交的数据的。(说实话,我经常因为忘记这个问题而浪费好多调查时间。) 1.// 判断enctype属性是否为multipart/form-data 2.boolean isMultipart = ServletFileUpload.isMultipartContent(request); 3. 4.// Create a factory for disk-based file items 5.DiskFileItemFactory factory = new DiskFileItemFactory();
7.// 当上传文件太大时,因为虚拟机能使用的内存是有限的,所以此时要通过临时文件来实现 上传文件的保存 8.// 此方法是设置是否使用临时文件的临界值(单位:字节) 9.factory.setSizeThreshold(yourMaxMemorySize); 10. 11.// 与上一个结合使用,设置临时文件的路径(绝对路径) 12.factory.setRepository(yourTempDirectory); 13. 14.// Create a new file upload handler 15.ServletFileUpload upload = new ServletFileUpload(factory); 16. 17.// 设置上传内容的大小限制(单位:字节) 18.upload.setSizeMax(yourMaxRequestSize); 19. 20.// Parse the request 21.List> items = upload.parseRequest(request); 22. 23.Iterator iter = items.iterator(); 24.while (iter.hasNext()) { 25.FileItem item = (FileItem) iter.next(); 26. 27.if (item.isFormField()) { 28.//如果是普通表单字段 29.String name = item.getFieldName(); 30.String value = item.getString(); 31.... 32.} else { 33.//如果是文件字段 34.String fieldName = item.getFieldName(); 35.String fileName = item.getName(); 36.String contentType = item.getContentType(); 37.boolean isInMemory = item.isInMemory(); 38.long sizeInBytes = item.getSize(); 39....
JQuery笔记-表单验证大全
jquery.validate.js 是 jquery 旗下的一个验证插件,借助 jquery 的优势,我们可以迅速验证一些常见的输入 , 并且可以自己扩充自己的验证方法。 举个例子,有这么一个表单: view plaincopy to clipboardprint?