- 浏览: 1078028 次
- 性别:
- 来自: 武汉
文章分类
最新评论
-
flyfeifei66:
list<bean> bean 中有 list&l ...
freemarker中的list -
BelloVersion:
第五种错误Remote host closed connect ...
客户端如何使用httpclient向https服务器发送数据 -
willxue:
看了半天 前面说的是错的?。。。
反向键索引的原理和用途 -
liulanghan110:
quainter 写道麻烦博主,参数为数组时,paramete ...
MYBATIS 的parameter -
quainter:
麻烦博主,参数为数组时,parameterType怎么写啊?
MYBATIS 的parameter
之前在《eko对Ajax异步交互实现无刷新的理解》这篇文章中,使用了Ajax的传统方法和AjaxGold框架2种方法实现了“可自动校验的表单”实例,今天eko使用jQuery的load()方法、$.get()、$.post()、$.ajax()和表单插件(Form Plugin)5种方法分别重写“表单验证”实例(Ajax无刷新),并且进一步说明中文乱码的问题(即编码和解码的问题)。与大家分享,呵呵~
如果对Ajax的传统方法和AjaxGold框架的方法,不是很理解,请阅读《eko对Ajax异步交互实现无刷新的理解》这篇文章。
如果对下面的例子中的jQuery不感冒,请查看jQuery中文手册进行一一对照。下载地址
首先,对编码知识进行简要的说明,请务必理解后再看下面的代码喔!!
发送中文字符请求时,如果使用get方式,运行正常;而使用post方法则会出现乱码。这是由于异步对象XMLHttpRequest在处理返回的responseText的时候,是按UTF-8编码进行解码的。如果你原来的网页编码是gb2312的话,当然会发生编码的冲突了;如果你原来的网页编码是utf-8,那么就不会出现中文乱码的问题了。
出现了中文乱码该怎么办呢?通常的解决办法是用escape()对发送的数据进行编码,然后在返回的responseText上再用unescape()进行解码。然而在JavaScript编程中通常不推荐使用escape()和unescape(),而推荐使用encodeURI()和decodeURI()。请看下面的“表单验证实例”,或许对你学习编码知识有一定的帮助喔~
第一、jQuery的load(url,[data],[callback])方法
语法说明:url为异步请求的地址,data用来向服务器传送请求数据,为可选参数。一旦data参数启用,整个请求过程将以post的方式进行,否则默认为get方式。如果希望在get方式下也传递数据,可以在url地址后面用类似“dataname1=data1&dataName2=data2”的方法。callback为Ajax加载成功后运行的回调函数。
另外使用load()方法返回的数据,不再需要考虑是文本还是XML,jQuery都会自动进行处理。
好了,下面马上使用load()方法实现“自动表单验证”实例。
首先是,html框架,5个例子都是一样的,如下:
<form>
用户昵称:<input type="text" onblur="startCheck(this)" name="User" id="User"><span id="UserResult"></span><br />
输入密码:<input type="password" name="passwd1"><br />
确认密码:</td><td><input type="password" name="passwd2"><br />
<input type="submit" value="注册" class="button">
<input type="reset" value="重置" class="button">
</form>
必要说明:
1、onblur="startCheck(this)" 这是JavaScript代码(简称js)
意思是text文本框失去焦点时触发自定义函数startCheck(),this是指代text文本框的值。
2、<span id="UserResult"></span>用来存放异步对象返回的结果。
jQuery代码如下:
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function startCheck(oInput){
//首先判断是否有输入,没有输入直接返回,并提示
if(!oInput.value){
oInput.focus(); //聚焦到用户名的输入框
document.getElementById("UserResult").innerHTML = "User cannot be empty.";
return;
}
oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法过滤左右空格
var sUrl = "action.asp?user=" + oInput;
sUrl=encodeURI(sUrl); //使用encodeURI()编码,解决中文乱码问题
$("#UserResult").load(sUrl,function(data){
$("#UserResult").html(decodeURI(data)); //使用decodeURI()解码
}
);
}
</script>
必要说明:
1、使用jQuery时,都必须加载jquery.min.js文件,可以到http://jquery.com/官网下载最新的版本。
2、判断是否有输入时,用的全是JavaScript语法。
3、对传递给“处理页”的参数进行encodeURI编码,以解决中文乱码问题。
4、load()中的function函数是为了对返回结果进行decodeURI解码,以解决中文乱码问题。
5、对$.trim()、$("#UserResult")、html等jQuery语法不理解的,可以参考jQuery中文手册。本站提供下载。
action.asp处理页代码如下:
<%
if(Request("user")="eko") then
Response.Write "Sorry, " & Request("user") & " already exists."
else
Response.Write Request("user")&" is ok."
end if
%>
必要说明:
1、action.asp处理页的编码是GB2312,如果把"Sorry..already exists..is ik"等英文改为中文,请看下面的说明。
2、使用post方法会出现乱码,这是由于异步对象XMLHttpRequest在处理返回的responseText的时候,是按UTF-8编码进行解码的。
3、所以post方式的话,必须把action.asp页另存为时,第三项的编码由 ANST 改为 UTF-8 (请务必记住!!)
第二、使用$.get(url,[data],[callback])和$.post(url,[data],[callback])方法
语法说明:尽管load()方法可以实现get和post两种方式,但很多时候开发者还是希望能够指定发送方式,并且处理服务器返回的值。jQuery提供了$.get()和$.post()两种方法,分别针对这两种请求方式。其中,url为请求地址,data为请求数据的列表,是可选参数,callback为请求成功后的回调函数,该函数接受两个参数,第一个参数为服务器返回的数据,第二个参数为服务器的状态,是可选参数。$.post()中的type为请求数据的类型,可以是html、xml、json等。
“可自动校验表单实例”的jQuery代码如下,html如上所述。
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function createQueryString(){
var username=$("#User").val();
//组合成对象的形式
var queryString={user:username};
return queryString;
}
function startCheck(oInput){
//首先判断是否有输入,没有输入直接返回,并提示
if(!oInput.value){
oInput.focus(); //聚焦到用户名的输入框
document.getElementById("UserResult").innerHTML = "User cannot be empty.";
return;
}
oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法过滤左右空格
$.get("action.asp",createQueryString(),
function(data){
$("#UserResult").html(data);
});
}
</script>
必要说明:
1、对$.trim()、$("#UserResult")、html、val()等jQuery语法不理解的,可以参考jQuery中文手册。本站提供下载。
2、自定义函数createQueryString(),是对传入“处理页”的参数,进行处理。一种常规的方法。
3、因为是以get方式处理,说明这里不需要进行编码和解码。下面以post方式处理,则需要编码和解码了,代码如下
function createQueryString(){
//使用encodeURI()编码解决中文乱码问题
var username=encodeURI($("#User").val());
//组合成对象的形式
var queryString={user:username};
return queryString;
}
function startCheck(oInput){
//首先判断是否有输入,没有输入直接返回,并提示
if(!oInput.value){
oInput.focus(); //聚焦到用户名的输入框
document.getElementById("UserResult").innerHTML = "User cannot be empty.";
return;
}
oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法过滤左右空格
$.post("action.asp",createQueryString(),
function(data){
$("#UserResult").html(decodeURI(data));
});
}
</script>
第三、使用$.ajax()方法
语法说明:尽管load()、$.get()和$.post()非常方便实用,但却不能控制错误和很多交互的细节,可以说这3种方法对Ajax的可控性较差。jQuery提供了一个强大的函数$.ajax(options)来设置Ajax访问服务器的各个细节,它的语法十分简单,就是设置Ajax的各个选项,然后指定相应的值。“可自动校验表单”实例代码如下:
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function createQueryString(){
//使用encodeURI()编码解决中文乱码问题
var username=encodeURI($("#User").val());
//组合成对象的形式
var queryString={user:username};
return queryString;
}
function startCheck(oInput){
//首先判断是否有输入,没有输入直接返回,并提示
if(!oInput.value){
oInput.focus(); //聚焦到用户名的输入框
document.getElementById("UserResult").innerHTML = "User cannot be empty.";
return;
}
oInput=$.trim(oInput.value); //使用jQuery的$.trim()方法过滤左右空格
$.ajax({
type: "GET",
url: "action.asp",
data: createQueryString(),
success: function(data){
$("#UserResult").html(decodeURI(data));
}
});
}
</script>
必要说明:
1、代码基本同上,只是$.ajax(options)稍有不同,对于其参数不理解可以参考jQuery中文手册。
2、给个建议,无论是get方式还是post方式,都习惯进行编码,以防出现中文乱码的问题。
3、再强调一下,无论使用哪种程序,如果遇到问题了,都可以参考相关的手册说明,这是建站所必需的。
上面的实例使用了jQuery的load()方法、$.get()、$.post()、$.ajax()的4种方法,都要考虑中文乱码的问题,下面推荐一个方法,进一步简化jQuery代码,呵呵。
第四、表单插件
表单插件(Form Plugin)是一款功能非常强大的插件,在jQuery官方网站上目前为4星级推荐,可以在http://plugins.jquery.com/project/form找到相关资料,下载后为jquery.form.js文件。该插件提供获取表单数据、重置表单项目、使用Ajax提交数据等一系列功能,深受开发人员的喜爱。
使用表单插件,再次重写“表单校验实例”,完整代码如下:
<form id="myform" action="action.asp">
用户昵称:<input type="text" onblur="startCheck(this)" name="User" id="User"><input type="button" value="检 查" class="button"><span id="UserResult"></span><br />
输入密码:<input type="password" name="passwd1"><br />
确认密码:</td><td><input type="password" name="passwd2"><br /><br />
<input type="submit" value="注册" class="button"><input type="reset" value="重置" class="button">
</form>
html框架加了一个“检查”的按钮(使用手动校验的方法),jQuery如下:
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript" src="jquery.form.js"></script>
<script language="javascript">
function startCheck(oInput){
//首先判断是否有输入,没有输入直接返回,并提示
if(!oInput.value){
oInput.focus(); //聚焦到用户名的输入框
document.getElementById("UserResult").innerHTML = "User cannot be empty.";
return;
}
}
$(function(){
$("input[type=button]").click(function(){
var options={
target: "#UserResult"
};
//表单的Ajax化
$("#myform").ajaxSubmit(options);
});
});
</script>
必要说明:
1、使用表单插件,必须加载jquery.form.js文件。
2、按Ajax方式提交数据,可以使用表单插件的ajaxSubmit(options)来按照Ajax的方式直接提交表单或者使用ajaxform(options)方法,通常在页面加载完成时执行,用来将表单统一Ajax化,并且提交表单依然使用传统的submit按钮,只不过进行的是Ajax提交。其中参数options与$.ajax(options)的参数基本相同,可以参考jQuery手册。
发表评论
-
jqgrid去掉分页
2015-12-15 11:17 2021设置jqgrid的属性 rowNum:-1 -
jqgrid获取选择行的值
2015-12-14 20:56 1642var params = $("#grid_1&q ... -
jqgrid中的 editcell获取值
2015-12-14 20:51 2902当需要在表格中输入数据时,就可以将单元格设置为可编辑的。 ... -
freemarker中的list
2013-11-15 15:10 133304freemarker list (长度,遍历,下标,嵌套, ... -
nicEdit富文本编辑器
2013-11-15 15:00 1624该插件很小,一共也只有两个文件。比较精简 导入文件后,写如 ... -
ueditor富文本编辑器
2013-11-15 14:57 1603首先到官网下载编辑器代码。 导入三个文件 <s ... -
AJAX上传图片
2013-11-15 14:52 1491采用 ajaxfileupload.js ... -
jQuery包装集和DOM对象
2013-01-17 14:23 1357jQuery包装集和DOM对象是有区别的,jQuery包装集 ... -
jQuery-对Select的操作集合[终结篇](转)
2011-10-21 15:50 1288转自http://www.cnblogs.com/bynet/ ... -
一些有用的正则表达式
2011-09-16 17:41 11301.限制只能输入数字 //限制只能输数字 func ... -
JS正则表达式
2011-08-08 10:28 0去除所有空格: str = str.r ... -
select选择框实现
2011-04-26 16:16 1119第一种:HTML <select name=" ... -
select 选择框设置值的问题
2011-04-26 13:47 2162... -
jQuery $.get $.post $.getJSON 详解
2011-04-25 17:59 1643载入静态页面 load( url, [data], [ca ... -
jquery中each函数
2011-04-25 17:14 1525jQuery.each( object, callback,a ... -
在jQuery中采用post传值
2011-04-25 16:29 3925格式 $.post(url,[data],[callback] ... -
JavaScript限制只能输入字符
2011-03-01 16:42 1119//限制只能输入数字 function checkchara ... -
text和checkbox只读属性的设置
2011-02-21 16:34 5621在设置某些表单的默认数据,而且不让使用者修改这些数据的时候,我 ... -
JavaScript浮点数运算--精度问题
2011-01-18 08:49 1607今天在用JavaScript运算的时候出现了一些问题,后来 ... -
HTML cellpadding与cellspacing属性
2011-01-18 08:48 1381单元格(cell) -- 表格的内容 单元格边距( ...
相关推荐
formValidator是JQuery的一个插件,用于表单验证,它可以实现在用户提交表单前检查输入数据的有效性,提供实时反馈,提高用户体验。使用formValidator可以定制验证规则,处理各种输入类型,如文本、电子邮件、数字等...
重写jQuery对象的方法能够给我们带来极大的灵活性和控制力,但同时也要谨慎使用,因为不当的重写可能会破坏原有的功能,导致维护困难和出错的风险。 需要注意的是,在重写方法时,我们需要考虑新方法对原有功能的...
通过使用预定义的验证方法和自定义规则,可以轻松地实现各种复杂的验证逻辑。 ### 2. 预定义验证规则 jQuery Validate 提供了一系列内置的验证规则,如 `required`(必填)、`email`(电子邮件格式)、`number`...
然而,在使用该插件时,可能会遇到一个问题:当表单中存在多个具有相同`name`属性的元素时,jQuery Validate插件默认只会对这些元素中的第一个进行验证,并且所有的验证错误信息都会显示在这个元素上。这种行为不仅...
在本实例中,jQuery用于增强用户界面的交互性和动态性,例如表单验证、数据提交、页面元素的动态加载等。尽管现在jQuery已经更新到更高的版本,但1.9仍然是一个广泛支持的版本,对于旧项目来说是可靠的。 压缩包中...
下面将详细介绍基于 jQuery Datepicker 的日期控件及其使用方法。 一、jQuery Datepicker 概述 jQuery UI 的 Datepicker 是一个轻量级且功能丰富的插件,它允许开发者在网页上添加日期选择功能。Datepicker 提供...
4. **Servlet处理JSON数据**:在`UserServlet`中,使用了`HttpServlet`类进行扩展,并重写了`doPost`方法。在方法内部,首先将请求内容类型设置为`text/html;charset=utf-8`,然后创建一个`User`列表并将一些用户...
8. **表单验证**:讲解客户端和服务器端的验证技术,如RequiredFieldValidator、RegularExpressionValidator等,确保用户输入的数据有效。 9. **异常处理**:学习如何在ASP.NET中捕获和处理异常,提供友好的错误...
这时指定模型纪录(例如这里的StudentSearchModel,StudentSearchModel间接继承BaseNopModel)就需要通过重写BaseNopModel.BindModel虚方法,实现MVC模板对指定模型纪录中属性成员及其实例的绑定, 从而在页面渲染...
在这个实例中,你将看到如何使用PHP处理这些操作,例如通过表单提交新闻、编辑现有新闻、删除不需要的新闻等。 4. **MVC模式**:Model-View-Controller(模型-视图-控制器)是一种常见的软件设计模式,在Web开发中...
18. **框架应用**:例如Laravel、Yii、Symfony等,了解其核心概念和使用方法。 19. **RESTful API设计**:理解REST原则,创建和消费API。 20. **单元测试**:使用PHPUnit进行PHP代码的自动化测试,确保程序质量。 ...
7. **表单处理**:表单提交和验证是Web应用中的常见任务,源码中可能包含多种表单处理方法,如使用filter_var()进行输入验证,以及错误处理机制。 8. **AJAX异步通信**:为了提升用户体验,FexBook可能利用...
6. **URL重写**:为了提高用户体验和搜索引擎友好性,论坛可能会使用URL重写技术,将动态URL转化为静态或伪静态形式。ASP可以通过ISAPI筛选器或IIS模块实现这一功能。 7. **安全性**:论坛开发需要考虑SQL注入、XSS...
**Ajax技术实例** Ajax(Asynchronous JavaScript and XML)...Ajax技术的应用广泛,不仅可以用于动态加载数据,还可以用于表单验证、实时聊天、无限滚动等场景。熟练掌握Ajax技术对于提升Web应用的用户体验至关重要。
在JavaScript中,我们可以使用`new FormData()`创建一个FormData实例,将文件添加到表单数据中,然后通过`xhr.send(formData)`发送。 3. **进度条显示**:为了提供更好的用户体验,我们需要在上传过程中显示进度条...
5. **表单处理**:PHP用于处理用户提交的表单数据,包括验证、过滤和存储。例如,防止SQL注入和跨站脚本攻击(XSS)。 6. **错误处理与日志记录**:良好的错误处理机制是任何应用程序的关键,源码中会包含错误报告...
7. **表单处理和验证**:处理用户提交的数据,进行客户端和服务器端的表单验证。 8. **错误和异常处理**:良好的错误报告和异常处理机制,确保系统稳定性。 9. **缓存技术**:使用如Redis或Memcached进行数据缓存,...
7. **表单验证**:在用户提交表单时,系统会进行数据验证,防止恶意输入,确保数据的准确性和安全性。 8. **缓存机制**:为了提高性能,系统可能会使用缓存(如Redis或Memcached)来存储经常访问的数据,减少数据库...
6. **表单处理与验证**:在文章的添加、编辑等操作中,系统需要处理用户提交的表单数据,并进行验证,防止SQL注入等安全问题。 7. **错误处理与日志记录**:良好的错误处理和日志记录可以提高系统的稳定性,方便...