二级菜单联动 ajax+json
Web应用目录：
具体的代码如下：
AjaxJSON.java
package AjaxJson;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import net.sf.json.JSONArray;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxJSON extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String province =new String(request.getParameter("province").getBytes("ISO-8859-1"),"UTF-8") ;
System.out.println("后台中的参数省份是："+province);
List<City> cities = new ArrayList<City>();
JSONArray jsonArray = null; //需要带入Json-lib包；
if ("广东省".equals(province)) {
City city1 = new City(1, "广州");
City city2 = new City(1, "深圳");
City city3 = new City(1, "珠海");
City city4 = new City(1, "佛山");
cities.add(city1);
cities.add(city2);
cities.add(city3);
cities.add(city4);
// 把java对象转换为json字符串
jsonArray = JSONArray.fromObject(cities);
}
if("海南省".equals(province))
{
City city1 = new City(1, "海口");
City city2 = new City(1, "三亚");
cities.add(city1);
cities.add(city2);
jsonArray = JSONArray.fromObject(cities);
}
PrintWriter pw = response.getWriter();
pw.write(jsonArray.toString());
System.out.println(jsonArray.toString());
}
}
City.java
package AjaxJson;
publicclass City {
private Integer id;
private String name;
public City(Integer id, String name) {
super();
this.id = id;
this.name = name;
}
public Integer getId() {
returnid;
}
publicvoid setId(Integer id) {
this.id = id;
}
public String getName() {
returnname;
}
publicvoid setName(String name) {
this.name = name;
}
}
Ajax_json.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>
</head>
<body>
<select id="provinceID">
<option>选择省份</option>
<option>广东省</option>
<option>海南省</option>
</select>
<select id="cityID">
<option>选择城市</option>
</select>
<script type="text/javascript">
document.getElementById("provinceID").onchange=function()
{
var province = this[this.selectedIndex].innerHTML;
alert("*****************province="+province);
var cityElement = document.getElementById("cityID");
//删除多余的城市，从最后一个开始删除
var size = cityElement.options.length;
if(size>1)
{
for(var i = size-1;i>0;i--)
{
cityElement.removeChild(cityElement.options[i]);
}
}
//加载XMLHttpRequest对象
var xhr = createXHR();
xhr.onreadystatechange=function()
{
if(xhr.readyState==4)
{
if(xhr.status==200)
{
//AJAX引擎读取服务端的信息
var xmlDocument = xhr.responseText;
//将Java语言的String类型转换JavaScript的string类型
var json = eval(xmlDocument);
size = json.length;
for(var i = 0;i<size;i++)
{
//得到每个城市的名称
var city = json[i].name;
var optionElement = document.createElement("option");
optionElement.innerHTML= city;
cityElement.appendChild(optionElement);
}
}
}
}
var method = "POST";
var sendData="province="+province;
var url = "${pageContext.request.contextPath}/AjaxJSON?time="+new Date().getTime();
alert("url="+url);
xhr.open(method,url);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(sendData);
}
//创建XMLHttpRequest
function createXHR()
{
var xhr=null;
try{
//ie6
xhr = new ActiveXObject(microsoft.xmlhttp);
}catch(e)
{
//其他浏览器
xhr = new XMLHttpRequest();
}
return xhr;
}
</script>
</body>
</html>