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

使用jquery实现判断用户名是否存在的实例

2010-03-05 16:52 651 查看

使用jquery实现判断用户名时候存在的实例
首先准备后台服务器的代码：用的是servlet
user.java代码如下：

package com.sj.jquery;
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@SuppressWarnings("serial")
public class User extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
String param = request.getParameter("username");
if (param == null || param.length() == 0) {
out.println("用户名不能为空");
} else {
String username = URLDecoder.decode(param, "UTF-8");
if (username.equals("wangxingkui")) {
out.println("用户名[" + username + "]已经存在，请使用别的用户名注册");
} else {
out.println("可以使用用户名[" + username + "]注册");
}
}
} finally {
out.close();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
public String getServletInfo() {
return "Short description";
}

}

web.xml代码如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <servlet>
<servlet-name>UserVerify</servlet-name>
<servlet-class>com.sj.jquery.User</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>UserVerify</servlet-name>
<url-pattern>/UserVerify</url-pattern>
</servlet-mapping>
</web-app>

这里就不多介绍了，

接下来编写jquery代码：
myjs.js代码如下

/*需要javascript 代码两件事情
*
*
*
**/
$(document).ready(function (){
//需要找到当前按钮注册事件
var usernameNode = $("#username");
$("#button").click(function (){
//获取文本框的内容

var username =usernameNode.val();
//将这个内容发送给服务器
if(username==""  ){
alert("用户名不能为空");
}else
{
$.get("http://localhost:8080/jquery1/UserVerify?username="+ encodeURI(encodeURI(username)),null,function(response){$("#di").html(response);
//3.接收服务器端返回的数据，填充到div中
});
}
//接受服务器返回的数据

});

//需要找到文本框
usernameNode.keyup(function(){
//获取当前文本框中的内容
var value = usernameNode.val();
if (value == "") {
//让边框变成红色，并且带背景图
usernameNode.addClass("userText");
} else {
//去掉边框和背景图
usernameNode.removeClass("userText");

}
});
});

css.css代码如下：

.userText{
/*控制文本框的红色*/
border: 1px solid red;
background-image: url(../images/userVerify.gif);
background-repeat: repeat-x;
background-position: bottom;
}

前台页面代码index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用户注册系统</title>
<mce:script type="text/javascript" src="js/jquery-1.4.2.js" mce_src="js/jquery-1.4.2.js"></mce:script>
<mce:script type="text/javascript" src="js/myjs.js" mce_src="js/myjs.js"></mce:script>
<link type="text/css" rel="stylesheet" href="css/css.css" mce_href="css/css.css">
</head>
<body>
请输入用户名：<input type="text" id="username" class="userText">
<input type="button" value="校验" id="button">
<div id="di"></div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航