ajax实现登陆表单验证功能:
使用ajax进行表单登陆验证功能更为的人性化，下面提供一个表单验证的实例代码，代码较为简单，仅仅作为演示之用而已，多实用的ajax表单验证功能都较为复杂。下面分布分出代码:
一.静态页面表单部分代码:
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script> <script type = "text/javascript" src = "jslib/verify.js"></script> </ head> <body> <h1>用户校验</h1> <!-- ajax 中可以不用 form 表单的提交 --> <!--input 标签中不需要用 name 属性，只用 id 属性就行了 --> <!-- 用 id 属性是为了使用 dom--> <input type = "text" id = "username" /><br /> <input type = "button" value = " 校验 " /> <!--div 为空是为了存放服务器返回的信息 --> <div id="result"></div> </body>
注意对jQuery库文件的引用，还有在ajax中可以不用form进行表单提交。
二.verify.js中的代码:
function verify() {
var paramObj=encodeURI(encodeURI($( "#username" ).val()));
$.get( "TestSvlt?username=" +paramObj, null ,callback);
}
function callback(data) {
var resultObj=$( "#result" );
resultObj.html(data);
}
三.创建一个servlet：AjaxLogin 类；在 doGet 方法中写：
response.setContentType( "text/html;charset=utf-8" );
PrintWriter out=response.getWriter();
String name=request.getParameter( "username" );
String username= URLDecoder.decode (name, "UTF-8" );
System. out .println(username);
if( null ==username|| "" .equals(username)) {
out.print( "username is not null" );
}
else {
if (! "lej" .equals(username)) {
out.print(username+ " not existing" );
}
else {
out.print(username+ " login successs" );
}
}
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=7886#pid10785
更多内容可以参阅:http://www.softwhy.com/jquery/
时间： 2024-10-15 06:27:49