你的位置:首页 > Java教程

[Java教程]ajax实现登陆表单验证功能


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/