二级菜单联动 ajax+json

最新推荐文章于 2020-08-03 22:11:28 发布

原创最新推荐文章于 2020-08-03 22:11:28 发布 · 936 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax

本文介绍了一个使用Ajax和JSON进行交互的Web应用实例，实现了根据用户选择的省份加载对应城市的功能。通过Ajax发送请求获取JSON数据，并利用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>

<title>Insert title here</title>

</head>

<body>

</select>

</select>

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>