jquery ajax 登录验证实现代码-丞旭猿

使用 jquery 框架：下载 jquery.js
新建一个 web 工程 ajax ；
在 webRoot 下新建一个 jslib 文件夹：专门存放 js 文件；
在 webRoot 下新建一个 html/jsp 页面：
login.html

实现代码如下：

<script type = “text/javascript” src = “jslib/jquery.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 = ” 校验 ” onclick = “verify()” /> 
<!–div 为空是为了存放服务器返回的信息 –> 
<div id = “result”></ div> 
</ body> 

在 jslib 下新建一个 js 文件：
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” ); 
} 
} 

以上就是【jquery ajax 登录验证实现代码】的全部内容了,欢迎留言评论进行交流!