JSP + Servlet + AJAX + JQuery实现用户名登录

 


1.服务器端的Servlet的源代码:

AJAXServer.java源代码


  1. package  test;  
  2.   
  3. import  java.io.*;  
  4. import  javax.servlet.*;  
  5. import  javax.servlet.http.*;  
  6.   
  7. public   class   AJAXServer   extends  HttpServlet {  
  8.   
  9.     public   void  doGet(HttpServletRequest request, HttpServletResponse response)  
  10.             throws  ServletException, IOException {  
  11.         this .doPost(request, response);  
  12.     }  
  13.   
  14.     public   void  doPost(HttpServletRequest request, HttpServletResponse response)  
  15.             throws  ServletException, IOException {  
  16.         response.setContentType("text/html;charset=UTF-8" );  
  17.         PrintWriter out = response.getWriter();  
  18.         String old = request.getParameter("userName" );  
  19.         if  (old ==  null  || old.length() ==  0 ) {  
  20.             out.println("用户名不能为空" );  
  21.         } else  {  
  22.             if  (old.equals( "admin" )) {  
  23.                 out.println("用户名 ["  + old +  "] 已经存在,请使用其他用户名" );  
  24.             } else  {  
  25.                 out.println("用户名 ["  + old +  "] 尚未存在,可以使用该用户名注册" );  
  26.             }  
  27.         }  
  28.     }  
  29. }  

 

 

2.web.xml中关于AJAXServer的配置。

Xml代码 
  1. < servlet >   
  2.     < servlet-name >AJAXServer </ servlet-name >   
  3.     < servlet-class > test.AJAXServer </ servlet-class >   
  4. </ servlet >   
  5.   
  6. < servlet-mapping >   
  7.     < servlet-name >AJAXServer </ servlet-name >   
  8.     < url-pattern > /AJAXServer </ url-pattern >   
  9. </ servlet-mapping >   

 

 

3.客户端html代码的实现。

ajax01.html源代码:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ajax01.html</title>
<script type="text/javascript" src="web/jquarylib/jquery.js"></script>
<script type="text/javascript" src="web/jquarylib/verify.js"></script>
  </head>
 
  <body>
    <input type = "text" id ="username"/>
    <input type = "button" value="11" onclick="verify();"/>
    <div id="result"></div>
  </body>
</html>


 

4.客户端javascript代码的实现。

verify.js源代码:

function verify(){

    var jqueryObj = $("#username");
   
    var username = jqueryObj.val();

    $.get("AJAXServer?username=" + username,null,callback);
}

function callback(data){
    $("#result").html(data);
}

 

你可能感兴趣的:(JavaScript,jquery,Ajax,jsp,servlet)