1、按照下面的工程来建：
2、新建UserVerify.html文件:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jquery实战</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link type="text/css" rel="stylesheet" href="css/UserVerify.css"/>
<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
<script type="text/javascript" src="js/UserVerify.js" ></script>
</head>
<body>
<table>
<tr>
<td>
请输入用户名称:
</td>
<td>
<input type="text" id="userName" />
</td>
<td>
<div id="verifyResult"></div>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="button" value="校验" id="verifyButton" /></td>
</tr>
</table>
</body>
</html>
3、新建css/UserVerify.css文件
.nameClass{
/*控制文本框的边框是红色的实线*/
border:1px solid red;
background-image:url(../images/userVerify.gif);
background-repeat:repeat-x;
background-position:bottom;
}
4、新建js/UserVerify.js文件
/*
*需要通过javascript代码来做2件事情：
*1、button被点击的时候，需要将文本框中的数据获取到，然后发送给服务器端，最后接受服务器返回的数据，填充到div中，看到结果；
*2、文本框上，用户按键后，需要判断文本框中的内容是否为空，否，红色的边框和背景图取消，是，则留
*/
/*
*
*/
$(document).ready(function(){
//页面装载完，执行以下代码：
//需要找到button按钮，注册事件
$("#verifyButton").click(function(){
//alert("Button click");
//1、获取文本框的内容；
var userName = $("#userName").val();
//2、将这个内容发送给服务器端
if(userName == "")
{
alert("用户姓名不能为空");
}
else
{
//alert(userName);
try
{
$.get("http://localhost:8080/150702JQuery/userVerify?userName="+encodeURI(encodeURI(userName)),null,function(response){
//3、接受服务器端返回的数据，填充到div中
$("#verifyResult").html(response);
});
}
catch(e)
{
alert(e.error);
alert(e.message);
}
}
});
//需要找到文本框，注册事件
$("#userName").keyup(function(){
var userName = $(this).val();
if(userName == "")
{
$(this).addClass("nameClass");
}
else
{
$(this).removeClass("nameClass");
}
});
});
5、添加额外的文件：
images/userVerify.gif
以上实现的样式如下图所示：
1）刚打开的样式：
2）输值却为空，则会改变文本框的样式：
6、新建UserVerifyServlet.java类：
package com.jquery.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class UserVerifyServlet extends HttpServlet{
private static final long serialVersionUID = 2348662049635889701L;
public void init()
{
System.out.println("init UserVerifyServlet");
}
public void service(HttpServletRequest request,HttpServletResponse response)
{
String userName = (String)request.getParameter("userName");
try
{
userName = URLDecoder.decode(userName,"UTF-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println("用户姓名【"+userName+"】可以注册");
}
catch (UnsupportedEncodingException e1)
{
e1.printStackTrace();
}
catch (IOException e)
{
e.printStackTrace();
}
}
}
7、在web.xml文件里增加：
<servlet>
<servlet-name>userVerify</servlet-name>
<servlet-class>com.jquery.servlet.UserVerifyServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>userVerify</servlet-name>
<url-pattern>/userVerify</url-pattern>
</servlet-mapping>
增加servlet类后，实现：
输入值后，点击校验按钮，通过ajax访问服务器端，返回数据页面div里展示：
时间： 2024-08-27 15:23:48