共用的Servlet
GetAjaxInfoServlet.java
package com.ruanku.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;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
public class GetAjaxInfoServlet extends HttpServlet{
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException {
this.doPost(request,response);
}
/**
* 判断使用哪种Servlet
*/
@Override
protected void doPost(HttpServletRequest request,IOException {
response.setContentType("text/html;charset=utf-8");
String action=request.getParameter("action");
if("checkUserName".equals(action)){
this.checkUserName(request,response);
}else if("ejld".equals(action)){
this.ejld(request,response);
}
}
/**
* 验证用户名
*/
private void checkUserName(HttpServletRequest request,IOException {
PrintWriter out=response.getWriter();
String userName=request.getParameter("userName");
JSONObject resultJson=new JSONObject();
if("jack".equals(userName)){
resultJson.put("exist",true);
}else{
resultJson.put("exist",false);
}
out.println(resultJson);
out.flush();
out.close();
}
/*
* 二级联动
*/
private void ejld(HttpServletRequest request,IOException {
PrintWriter out=response.getWriter();
String shengId=request.getParameter("shengId");
JSONObject resultJson=new JSONObject();
JSONArray jsonArray=new JSONArray();
JSONObject temp=null;
switch(Integer.parseInt(shengId)){
case 1:{
temp=new JSONObject();temp.put("id",1);temp.put("text","南京");jsonArray.add(temp);
temp=new JSONObject();temp.put("id",2);temp.put("text","南通");jsonArray.add(temp);
temp=new JSONObject();temp.put("id",3);temp.put("text","泰兴");jsonArray.add(temp);
break;
}
case 2:{
temp=new JSONObject();temp.put("id",4);temp.put("text","济南");jsonArray.add(temp);
temp=new JSONObject();temp.put("id",5);temp.put("text","烟台");jsonArray.add(temp);
temp=new JSONObject();temp.put("id",6);temp.put("text","蓬莱");jsonArray.add(temp);
break;
}
case 3:{
temp=new JSONObject();temp.put("id",7);temp.put("text","杭州");jsonArray.add(temp);
temp=new JSONObject();temp.put("id",8);temp.put("text","宁波");jsonArray.add(temp);
temp=new JSONObject();temp.put("id",9);temp.put("text","温州");jsonArray.add(temp);
break;
}
}
resultJson.put("rows",jsonArray);
out.println(resultJson);
out.flush();
out.close();
}
}
配置的xml信息
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>AjaxJsonchap01</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>getAjaxInfoServlet</servlet-name>
<servlet-class>com.ruanku.web.GetAjaxInfoServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>getAjaxInfoServlet</servlet-name>
<url-pattern>/getAjaxInfo</url-pattern>
</servlet-mapping>
</web-app>
<1>判断登录名是否相同
checkUserName.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function checkUserName(){
var userName=document.getElementById("userName").value;
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
alert(xmlHttp.responseText);
var dataObj=eval("("+xmlHttp.responseText+")");
if(dataObj.exist){
document.getElementById("tip").innerHTML="<img src='no.png'/>该用户名已经存在";
}else{
document.getElementById("tip").innerHTML="<img src='ok.png'/>该用户名可用";
}
}
};
xmlHttp.open("get","getAjaxInfo?action=checkUserName&userName="+userName,true);
xmlHttp.send();
}
</script>
</head>
<body>
<table>
<tr>
<th>用户注册</th>
</tr>
<tr>
<td>用户名：</td>
<td><input type="text" id="userName" name="userName" onblur="checkUserName()"/><font id="tip"></font></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="text" id="password" name="password"/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="text" id="password2" name="password2"/></td>
</tr>
<tr>
<td><input type="submit" value="注册"/></td>
<td><input type="button" value="重置"/></td>
</tr>
</table>
</body>
</html>
二级联动
ejld.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function loadInfo(){
var shengId=document.getElementById("sheng").value;
shi.options.length=0; // 删除所有市下拉框的选项
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
alert(xmlHttp.responseText);
var dataObj=eval("("+xmlHttp.responseText+")");
for(var i=0;i<dataObj.rows.length;i++){
var o=dataObj.rows[i];
shi.options.add(new Option(o.text,o.id));
}
}
};
xmlHttp.open("get","getAjaxInfo?action=ejld&shengId="+shengId,true);
xmlHttp.send();
}
</script>
</head>
<body>
省：
<select id="sheng" onchange="loadInfo()">
<option value="1">江苏省</option>
<option value="2">山东省</option>
<option value="3">浙江省</option>
</select>
市
<select id="shi">
</select>
</body>
</html>