jquery $.ajax验证用户名是否存在示例代码

来源：互联网发布：苹果软件拆卸工具编辑：程序博客网时间：2024/05/21 19:40

jquery $.ajax验证用户名是否存在示例代码

AjaxXMLServer的Servlet代码如下:

package com.web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxXMLServer extends HttpServlet {


   public void doGet(HttpServletRequest request, HttpServletResponse response)
           throws ServletException, IOException {

       try {
           //响应的Content-Type必须是text/xml,因为在jquery中数据接收的格式为xml
           response.setContentType("text/xml;charset=utf-8");
           request.setCharacterEncoding("utf-8");
           response.setCharacterEncoding("utf-8");
           PrintWriter out = response.getWriter();
           //1、获取参数
           String userName=request.getParameter("userName");
           //2、返回的数据类型拼装成xml格式
           StringBuilder builder=new StringBuilder();
           builder.append("<message>");
           if(userName==null || userName.length()==0){
               builder.append("用户名不能为空").append("</message>");
           }else{
               //3.校验操作
               if(userName.equals("tfq")){
                   //返回给用户提示信息
                   builder.append("用户名["+userName+"]已经存在,请重新输入用户名").append("</message>");
               }else{
                   builder.append("用户名["+userName+"]尚未被注册,可以使用该用户名").append("</message>");
               }
               out.println(builder.toString());
           }
       } catch (Exception e) {
           e.printStackTrace();
       }
   }


   public void doPost(HttpServletRequest request, HttpServletResponse response)
           throws ServletException, IOException {

       response.setContentType("text/xml");
       request.setCharacterEncoding("utf-8");
       response.setCharacterEncoding("utf-8");
       doGet(request,response);
   }

}

checkUserJquery.html文件代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
      <title>My JSP 'checkUser starting page</title>

   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">
   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="This is my page">
   <script type="text/javascript" src="js/jquery-1.4.2.js" ></script>
   <script type="text/javascript" src="js/myVlidate_jquery.js" ></script>
</head>

<body>
    <center>
       <br />
       用户名:<input type="text" id="userName" />
       <input type="button" value="校验" onclick="validate()" />
       <div id="showResult"></div>
    </center>
</body>
</html>

myVlidate_jquery.js文件代码如下:

//验证用户是否存在
function validate() {

   // 1获取文本框的内容
   // document.getElementById("userName"); dom的方式
   // Jquery的查找节点的方式,参数中#加上id属性值可以找到一个节点
   var obj = $("#userName");
   var userName = obj.val();
   //alert("userName: " + userName);

   // 2将获取到的内容发送给服务器的servlet
   // 调用jquery的XMLHTTPrequest对象get请求的封装
   //$.get("servlet/CheckUserName?userName=" + userName, null, callback);
   //JS中定义一个简单对象的格式
   var jsObj={name:"123",age:30};
   //使用jquery的XMLHTTPRequest对象get请求的封装
   $.ajax({
       type:"POST",   //http请求方式
       url:"servlet/AjaxXMLServer", //发送给服务器的url
       data:"userName="+userName, //发送给服务器的参数
       dataType:"xml", //告诉JQUERY返回的数据格式(注意此处数据格式一定要与提交的servlet返回的数据格式一致,不然不会调用callback)
       success:callback //定义交互完成,并且服务器正确返回数据时调用回调函数
   });
}

// 回调函数
function callback(data) {
   // 3接收报务器返回的数据
   //首先需要将data这个dom对象中的数据解析出来
   var jqueryObj=$(data);
   //获取message节点
   var message=jqueryObj.children();
   //获取文本内容
   var text=message.text();
   // 4把返回的数据在div中显示
   $("#showResult").html(text);
}

我在做此示例时,不小心把AjaxXMLServer中返回jquery的数据格式弄成html了,怎样调试都进不了callback.请大家注意一下servlet与query中返回的数据要一致就行了。