二级菜单联动 ajax+json

来源：互联网发布：2017淘宝恶意退款教程编辑：程序博客网时间：2024/04/25 11:28

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 Integerid;

private Stringname;

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"%>

<!DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">

<title>Insert title here</title>

</head>

<body>

<selectid="provinceID">

</select>

<selectid="cityID">

</select>

<scripttype="text/javascript">

document.getElementById("provinceID").onchange=function()

{

varprovince = this[this.selectedIndex].innerHTML;

alert("*****************province="+province);

varcityElement =document.getElementById("cityID");

//删除多余的城市，从最后一个开始删除

varsize = cityElement.options.length;

if(size>1)

{

for(vari = size-1;i>0;i--)

{

cityElement.removeChild(cityElement.options[i]);

}

//加载XMLHttpRequest对象

varxhr = createXHR();

xhr.onreadystatechange=function()

{

if(xhr.readyState==4)

{

if(xhr.status==200)

{

//AJAX引擎读取服务端的信息

varxmlDocument =xhr.responseText;

//将Java语言的String类型转换JavaScript的string类型

varjson = eval(xmlDocument);

size= json.length;

for(vari = 0;i<size;i++)

{

//得到每个城市的名称

varcity = json[i].name;

varoptionElement =document.createElement("option");

optionElement.innerHTML=city;

cityElement.appendChild(optionElement);

}

varmethod = "POST";

varsendData="province="+province;

varurl = "${pageContext.request.contextPath}/AjaxJSON?time="+newDate().getTime();

alert("url="+url);

xhr.open(method,url);

xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");

xhr.send(sendData);

}

//创建XMLHttpRequest

functioncreateXHR()

{

varxhr=null;

try{

//ie6

xhr = newActiveXObject(microsoft.xmlhttp);

}catch(e)

{

//其他浏览器

xhr = newXMLHttpRequest();

}

returnxhr;

}

</script>

</body>

</html>