您的位置：首页 > Web前端 > JQuery

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

2012-11-01 21:23 801 查看

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中返回的数据要一致就行了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航