今天学习了jQuery中的Ajax，简单的实现一个二级联动的实例，废话不多说，直接上代码
//这是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" src="jquery2.x/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
//直接调用getProvince()方法，开启整个js语句
getProvince();
//创建一个Ajax对象，创建方法在上一篇已经介绍了
var ajax;
function getAjax(){
try{
ajax=new XMLHttpRequest();
}catch (e) {
ajax=new ActiveXObject("Microsoft.XMLHTTP");
}
return ajax;
}
function getProvince(){
ajax = getAjax();
//使用get提交，将url和想要传递到后台的参数进行拼接，便于后台获取数据
ajax.open("get","/java-9-20day/choose?name=province",true);
//监听Ajax的状态变化
ajax.onreadystatechange=function(){
if(ajax.status==200&&ajax.readyState==4){
//当Ajax对象状态为4，并且status为200时，responseText接收数据
var data=ajax.responseText;
//将接收到的字符串转换成json格式
var json=JSON.parse(data);
//循环得到的json数组，将值添加到select中
for (var i = 0; i < json.length; i++) {
//创建一个option
var opt=document.createElement("option");
var select1=document.getElementById("myselect1");
//给option的value属性和具体内容赋值
opt.value=json[i].id;
opt.innerHTML=json[i].name;
//将option添加到select中
select1.append(opt);
}
}
}
ajax.send();
}
//当省份选择好了，自动将该省的城市添加到省份后的select中
//方法的具体实施和上面的基本上差不多，只有略有改动
function getCity() {
//获得所选省份的id
var id = document.getElementById("myselect1").value;
ajax = getAjax();
//选择了省份后，将city的下拉框置空
document.getElementById("myselect2").innerHTML="";
//拼接想要传过去的参数，id要传过去，servlet通过id找到想要的城市
ajax.open("get", "/java-9-20day/choose?name=city&cityId=" + id, true);
//后面的不说了都一样
ajax.onreadystatechange = function() {
if (ajax.status == 200 && ajax.readyState == 4) {
var data = ajax.responseText;
var json = JSON.parse(data);
for (var i = 0; i < json.length; i++) {
var opt = document.createElement("option");
var select2 = document.getElementById("myselect2");
opt.value = json[i].id;
opt.innerHTML = json[i].name;
select2.append(opt);
}
}
}
ajax.send();
}
</script>
</head>
<body>
省:
<select id="myselect1" onchange="getCity()">
<option>---请选择---</option>
</select>
市:
<select id="myselect2">
<option>---请选择---</option>
</select>
</body>
</html>
//这是servlet的代码
package com.coding.province;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSON;
import net.sf.json.JSONSerializer;
@WebServlet("/choose")
public class ChooseServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//设置响应的字符集，防止乱码
resp.setContentType("text/html;charset=utf8");
//得到拼接过来的参数
String param = req.getParameter("name");
//判断参数的值是否符合条件
if (param.equals("province")) {
//传过来的请求想要省的名称的响应，所以获取省份响应给他
List<Province> pro = Province.getAllProvince();
//拼接成一个json数组形式的字符串返回回去
//就是这个样子[{"id":1,"name":"安徽"},{"id":2,"name":"广东"},{"id":3,"name":"云南"}]
//纯手动拼接
StringBuffer sbf1=new StringBuffer();
sbf1.append("[");
for (int i = 0; i < pro.size(); i++) {
if (i==pro.size()-1) {
sbf1.append("{\"id\":"+pro.get(i).getId()+",\"name\":\""+pro.get(i).getName()+"\"}");
}else {
sbf1.append("{\"id\":"+pro.get(i).getId()+",\"name\":\""+pro.get(i).getName()+"\"},");
}
}
sbf1.append("]");
//发送响应
resp.getWriter().print(sbf1);
}
//这是城市的响应
//导入工具包可以轻松将list转换成json序列，不用进行手动拼接
else {
String cityId = req.getParameter("cityId");
List<City> list = City.getCityByProvinceId(Long.valueOf(cityId));
JSON json = JSONSerializer.toJSON(list);
resp.getWriter().print(json);
}
}
}
//下面是添加城市和省份的代码
package com.coding.province;
import java.util.ArrayList;
import java.util.List;
public class Province {
private Long id;
private String name;
public Province(Long id, String name) {
super();
this.id = id;
this.name = name;
}
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Province() {
super();
}
public static List<Province> getAllProvince() {
List<Province> provinces = new ArrayList<Province>();
provinces.add(new Province(1L, "安徽"));
provinces.add(new Province(2L, "广东"));
provinces.add(new Province(3L, "云南"));
return provinces;
}
}
package com.coding.province;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
public class City {
private Long id;
private String name;
public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public City() {
}
public City(Long id, String name) {
super();
this.id = id;
this.name = name;
}
/**
* 根据省份id查询省份中的城市!
*
* @return
*/
public static List<City> getCityByProvinceId(Long id) {
List<City> citys = new ArrayList<City>();
if (id == 1) {
citys = Arrays.asList(
new City(1L,"合肥"),
new City(2L,"阜阳"),
new City(3L,"淮南"),
new City(4L,"黄山"),
new City(5L,"宿州"),
new City(6L,"六安"),
new City(7L,"蚌埠")
);
} else if (id == 2) {
citys = Arrays.asList(
new City(11L,"广州"),
new City(12L,"佛山"),
new City(13L,"东莞")
);
} else if (id == 3) {
citys = Arrays.asList(
new City(21L,"昆明"),
new City(22L,"玉溪"),
new City(23L,"丽江")
);
}
return citys;
}
}
将list序列化用到jar包https://download.csdn.net/download/yang_xinqiao/10679729