1. 程式人生 > >使用ajax 實現使用者的使用者名稱註冊驗證,如果該使用者已存在則提示該使用者已存在

使用ajax 實現使用者的使用者名稱註冊驗證,如果該使用者已存在則提示該使用者已存在

MyJsp.jsp  程式碼:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPEHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>   <head>     <title>MyJsp.jsp</title>     <!--            1匯入JQuery庫          2 獲取name =userName的節點                   3 為userName新增change 函式  獲取 userName的value屬性值,
                            去除前後空格且不為空,準備傳送ajax請求                      傳送ajax 請求並檢驗userName是否可用                   在服務端直接返回一個HTML的片段                   在客戶端直接把其新增到#message的HTML中;      -->    <script src="/MyCommunity/js/jquery-1.8.3.js"></script>    <script type="text/javascript">    //程式寫完,要習慣性檢查一下
      $(function(){           $("#userName").change(function(){              var val=$(this).val();               val=$.trim(val);                  if(val !=""){                    var url="/MyCommunity/ValidateUserName";                        var args={"userName":val,"time":new Date()};                    $.post(url,args,function
(data){
                      $("#message").html(data);                    });                  }           });       });    </script>   </head>   <body>       <form action="" method="post">         userName:<input type="text" name="userName" id="userName"/>          <br/>         <div id="message"></div>          <br/>          <input type="submit" value="提交" />       </form>   </body> </html>

servlet 程式碼:
package ui;import java.util.List;import java.io.IOException;import java.io.PrintWriter;import java.util.Arrays;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;publicclassValidateUserNameextendsHttpServlet{publicvoid doGet(HttpServletRequest request,HttpServletResponse response)throwsServletException,IOException{ request.getRequestDispatcher("/WEB-INF/jsp/MyJsp.jsp").forward(request, response);}publicvoid doPost(HttpServletRequest request,HttpServletResponse response)throwsServletException,IOException{List<String> userNames=Arrays.asList("AAA","BBB","CCC");String userName=request.getParameter("userName");String result=null;if(userNames.contains(userName)){ result="<font color='red'>該使用者名稱已存在</font>";}else{ result="<font color='green'>該使用者名稱可以使用</font>";} response.getWriter().print(result);}}