Ajax用戶唯一性的驗證

 

         Ajax用戶唯一性的驗證

今天初步學習了Ajax技術,簡單的做了一個小程序,用Ajax技術,實現從數據庫中獲取名字,驗證用戶的用戶名的唯一性的操作。

在寫的時候遇到了BUG,調了半天,不知道怎麼回事,就是在<input type=”text”>文本框中不管輸入什麼,在後臺總是顯示null 。 後來才發現 是參數名傳錯了。 糾結啊~~~~~~~~

 

我是用hibernate來寫的,需要引入的文件:

 

1、首先建WEB PROJECT ,

在domain包下創建Employee實體,封裝id,name屬性。生成 構造器,toString()方法,以及set()和get()方法。在創建Employee.hbm.xml文件。

2、在dao包下,創建EmployeeDao接口,在裏面封裝根據用戶名查找findByName()方法。在EmployeeDaoImpl中實現 這個方法。根據query查詢。

3、創建service層。

4、JSP源碼:

在jsp中:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>用戶名唯一性的驗證</title>

  </head>

  <body>

    <div id="bdy" align="center">

    <h1>Ajax案例</h1>

    用戶名:<input type="text" name="uname" id="uname"/>

    <input type="button" value="檢查用戶名" id="checkBtn">

    <span id="msg" style="color: red"></span>

    </div>

  </body>

</html>

<script type="text/javascript">

<!--

    //當窗體加載完畢後 觸發該函數

    window.onload = function(){

      

       //alert(createXMLHttpRequest());

       //第一步:初始化XMLHttpRequest對象

       var xmlHttp = createXMLHttpRequest();

       //獲取btn按鈕對象

       var btnNode = document.getElementById("checkBtn");

       //註冊事件

       btnNode.onclick = function(){

           var inputNameNode = document.getElementById("uname");

           //當readystate對象狀態發生變化的時候觸發該匿名函數

           xmlHttp.onreadystatechange = function(){

              //服務器端已經處理完畢,返回信息

              if(xmlHttp.readyState==4){

              //代表的是返回的頁面是否正常

                  if(xmlHttp.status==200){

                     /*第六步:客戶端接收*/

                     var msg = xmlHttp.responseText;

                     /*第七步:修改頁面內容*/

                     document.getElementById("msg").innerHTML=msg;

                  }

              }

       }

       //第二步:規定請求的參數

       /*

           method:get|post 區別

           url:請求的路徑    相對路徑   絕對路徑

           async:異步:true    同步:false    boolean值

       */

       xmlHttp.open("POST","./servlet/HelloServlet?timeStamp="+new Date().getTime(),true);

       //用POST方法時,必須設置一個頭    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

       /*第三步:服務器發送請求*/

       xmlHttp.send("name="+inputNameNode.value);

       /*第四步:第五步:  服務器接收     服務器返回*/

       }

    }

   

    //ajax XMLHttpRequest對象

    function createXMLHttpRequest(){

       //聲明一個xmlHttp;

       var xmlHttp;

      

       try{

       //firefox opera等非 IE的瀏覽器中

       xmlHttp = new XMLHttpRequest();

       }catch(ex){

           try{

              //IE瀏覽器

           xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");

           }catch(e){

              xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

           }

       }

       return xmlHttp;

    }

//-->

</script>

 

5、在servlet中完成操作。代碼如下:

package cn.csdn.hr.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import cn.csdn.hr.dao.EmployeeDao;

import cn.csdn.hr.dao.EmployeeDaoImpl;

import cn.csdn.hr.domain.Employee;

 

public class HelloServlet extends HttpServlet {

         public HelloServlet() {

                   super();

         }

         public void doGet(HttpServletRequest request, HttpServletResponse response)

                            throws ServletException, IOException {

                   //System.out.println("請求處理中...........");

                   doPost(request, response);

         }

         public void doPost(HttpServletRequest request, HttpServletResponse response)

                            throws ServletException, IOException {

                   //doGet(request, response);

                   //第四步:服務器接收

                   request.setCharacterEncoding("utf-8");

                   String name = request.getParameter("name");

                   System.out.println(name);

                  

                   //第五步:服務器返回

                   response.setContentType("text/html;charset=utf-8");

                   PrintWriter out = response.getWriter();

                   EmployeeDao employeeDao= new EmployeeDaoImpl();

                   boolean flag = employeeDao.findByName(name);

                            if(flag){

                                     out.print("用戶名已經存在");

                            }else{

                                     out.print("用戶名可用!");

                            }

                   out.flush();

                   out.close();

         }

}

最終,運行結果如下:

(1)       在數據庫中的數據讀取:

 

 

 

(2)       如果用戶名不在數據庫中存在的情況下:

發佈了138 篇原創文章 · 獲贊 3 · 訪問量 15萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章