Java后台代码部分：AjaxInfo.java
package 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 AjaxInfo extends HttpServlet{ private static final long serialVersionUID = 2238572939991508891L; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("text/html;charset=utf-8"); String action = req.getParameter("action"); if("checkUserName".equals(action)){ this.checkUserName(req, resp); }else if("ejld".equals(action)){ this.ejld(req, resp); } } public void checkUserName(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String userName=req.getParameter("username"); JSONObject resultJson=new JSONObject(); if("jack".equals(userName)){ resultJson.put("exist", true); }else{ resultJson.put("exist", false); } PrintWriter out=resp.getWriter(); out.print(resultJson); out.flush(); out.close(); } public void ejld(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String shengId=req.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); PrintWriter out=resp.getWriter(); out.print(resultJson); out.flush(); out.close(); } }
前台：1.登陆验证 checkUserName.html，这里需要用到ok.png和no.png图片，图片我放在最后
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>ajax.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <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+")");//转换为 json 对象 if(dataObj.exist){ document.getElementById("tip").innerHTML="<img src='no.png' /> 该用户名已经存在";//这里需要用到no.png图片 }else{ document.getElementById("tip").innerHTML="<img src='ok.png' /> 该用户名可以使用";//这里需要用到ok.png图片 } } } xmlHttp.open("get","ajax?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="password" 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>
前台：2.二级联动 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+")");//转换为 json 对象 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","ajax?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>
配置：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"> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>headFirstAjaxJsonChap03</servlet-name> <servlet-class>web.AjaxInfo</servlet-class> </servlet> <servlet-mapping> <servlet-name>headFirstAjaxJsonChap03</servlet-name> <url-pattern>/ajax</url-pattern> </servlet-mapping> </web-app>
注意：需要放入的jar包
commons-beanutils-1.7.0.jar commons-collections-3.2.jar commons-lang-2.4.jar commons-logging-1.0.4.jar ezmorph-1.0.3.jar json-lib-2.2.3-jdk15.jar
两张图片（no.png和ok.png）