使用jQuery和ajax实现省市联动（含json的使用）

何同学。

于 2020-07-10 10:53:50 发布

阅读量416

点赞数

分类专栏： Java学习文章标签： Ajax 省市联动效果 json 省市联动 js省市联动

本文链接：https://blog.youkuaiyun.com/qq_45100706/article/details/107245523

版权

Java学习专栏收录该内容

25 篇文章

订阅专栏

实现效果如下：在这里插入图片描述

1、不使用json的方式

前端：

<%@ 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="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
	$(function(){
		//找到省份的元素
		$("#province").change(function(){
			//一旦发生改变就去请求省份对应的城市数据
			var pid=$(this).val();
			$.post("cityServlet",{pid:pid},function(data,status){
				//遍历之前清空之前的值
				$("#city").html("<option value=''>---请选择---</option>")
				$(data).find("city").each(function(){
					//遍历出每一个city，取出其cname,id
					var id=$(this).children("id").text();
					var cname=$(this).children("cname").text();
					$("#city").append("<option value='"+id+"'>"+cname+"</option>");
				})
			})
		})
	})
</script>
</head>
<body>
省份：<select name="province" id="province">
	<option value="">---请选择---</option>
	<option value="1">四川</option>
	<option value="2">福建</option>
	<option value="3">湖北</option>
</select>
城市：<select name="city" id="city">
	<option value="">---请选择---</option>
</select>
</body>
</html>

后端：

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 com.thoughtworks.xstream.XStream;

import cn.goktech.Dao.CityDao;
import cn.goktech.Dao.impl.CityDaoImpl;
import cn.goktech.bean.City;


@WebServlet("/cityServlet")
public class cityServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//获取请求参数
		String pid = request.getParameter("pid");
		CityDao cityDao=new CityDaoImpl();
		int pid2 = Integer.parseInt(pid);
		List<City> citys = cityDao.findCity(pid2);
		//把list集合封装为xml方式发送给客户端
		XStream xStream=new XStream();
		//简化city标签
		xStream.alias("city", City.class);
		String xml = xStream.toXML(citys);
				
		//相应数据
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().write(xml);
				
		System.out.println(xml);
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

2、使用json实现省市联动

前端：

<%@ 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="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
	$(function(){
		//找到省份的元素
		$("#province").change(function(){
			//一旦发生改变就去请求省份对应的城市数据
			var pid=$(this).val();
			$.post("cityServlet2",{pid:pid},function(data,status){
				//遍历之前清空之前的值
				$("#city").html("<option value=''>---请选择---</option>")
				$(data).each(function(index,c){
					$("#city").append("<option value='"+c.id+"'>"+c.cname+"</option>");
				});
			},"json")
		})
	})
</script>
</head>
<body>
省份：<select name="province" id="province">
	<option value="">---请选择---</option>
	<option value="1">四川</option>
	<option value="2">福建</option>
	<option value="3">湖北</option>
</select>
城市：<select name="city" id="city">
	<option value="">---请选择---</option>
</select>
</body>
</html>

后端：

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 cn.goktech.Dao.CityDao;
import cn.goktech.Dao.impl.CityDaoImpl;
import cn.goktech.bean.City;
import net.sf.json.JSONArray;


@WebServlet("/cityServlet2")
public class cityServlet2 extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=utf-8");
		
		//获取页面传过来的id
		int pid=Integer.parseInt(request.getParameter("pid"));
		CityDao cityDao=new CityDaoImpl();
		//通过访问数据库获取
		List<City> citys = cityDao.findCity(pid);
		//将list数据转为json数据
		/*JSONArray：数组，集合
		 * list->json;json->toString   转为string对象
		 * [{"cname":"成都","id":1,"pid":1},{},{}]
		 *JSONObject：简单的数据，对象
		 *{{"cname":"成都","id":1,"pid":1}}
		 */
		JSONArray jsonArray = JSONArray.fromObject(citys);
		String json = jsonArray.toString();
		//把字符串对象发送到客户端
		response.getWriter().write(json);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}