天天看點
傳回

JSP + Servlet + AJAX + JQuery實作使用者名登入

JSP + Servlet + AJAX + JQuery實作使用者名登入

1.伺服器端的Servlet的源代碼：

AJAXServer.java源代碼

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

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

Xml代碼 

  1. < servlet >   
  2.     < servlet-name >AJAXServer </ servlet-name >   
  3.     < servlet-class > test.AJAXServer </ servlet-class >   
  4. </ servlet >   
  5. < servlet-mapping >   
  6.     < servlet-name >AJAXServer </ servlet-name >   
  7.     < url-pattern > /AJAXServer </ url-pattern >   
  8. </ 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" οnclick="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/AJAX servlet jquery ajax jsp javascript ViewUI
上一篇: VS2005 使用AJAX直接調用背景方法
下一篇: insight jquery ajax參數序列化

繼續閱讀