JQuery省市联动（Json）

最新推荐文章于 2021-11-25 21:02:18 发布

sigarlin

最新推荐文章于 2021-11-25 21:02:18 发布

阅读量230

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery 文章标签：省市联动 json

本文链接：https://blog.youkuaiyun.com/sigarlin/article/details/88781625

JQuery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用JQuery处理Json数据，实现实时的省市联动效果。通过Ajax从服务器获取Json格式的省市区数据，动态更新下拉列表，提供用户流畅的地区选择体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(function(){
	$("#province").change(function(){
		var pid = $(this).val();
		$("#city").html("<option value=''>--请选择--</option>");
		$.post("FindCitiesServlet02",{pid:pid},function(data,status){
			$(data).each(function(index,city){
				$("#city").append("<option value='" + city.id + "'>" + city.cname + "</option>");
			});
		},"json");
	});
});

package com.sigar.servlet;

import java.io.IOException;
import java.sql.SQLException;
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.sigar.dao.CityDao;
import com.sigar.dao.impl.CityDaoImpl;
import com.sigar.util.CityBean;
import com.thoughtworks.xstream.XStream;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

/**
 * Servlet implementation class FindCitiesServlet02
 */
@WebServlet("/FindCitiesServlet02")
public class FindCitiesServlet02 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			int pid = Integer.parseInt(request.getParameter("pid"));
			CityDao cityDao = new CityDaoImpl();
			List<CityBean> cities = cityDao.getCities(pid);
			JSONArray jsonArray = JSONArray.fromObject(cities);
			String json = jsonArray.toString();
			response.setContentType("text/html;charset=utf-8");
			response.getWriter().write(json);
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

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

}