ajax请求+Servlet+JSon

最新推荐文章于 2021-10-05 11:24:42 发布

乔木晨子

最新推荐文章于 2021-10-05 11:24:42 发布

阅读量113

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/qq_41361162/article/details/103081770

版权

ajax 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

1.ajax

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax</title>
<script src="jQuery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">

$(function(){
	//发送请求获得数据
	$.get("cityServlet",function(r){
		// 获取输入的省份
		var select = $("#province");
		var opt = "";
		$.each(r,function(i,n){
			opt += `<option value="${n.id}">${n.name}</option>`;
		});
		select.append(opt);
					
	},"json");
		
	$("#province").change(function(){
		var proid = $(this).val();
		var citySelect= $("#city");
		
		// 根据省份id判断城市
		if(proid == -1){
			citySelect.html("<option value='-1'>--请选择--</option>");	
		}else{
			$.post("cityServlet",{"pro":proid},function(r){
				// {"pro":proid} 提交的参数 是json
				citySelect.empty();//避免数据堆叠
				var opts = "";
				$.each(r,function(i,n){
					opts += `<option value="${n.id}">${n.name}</option>`;
				});
			
				citySelect.append(opts);
				
			},"json");
		}
	})
	
})
	
</script>
</head>
	<body>
		省:<select id="province"><option value="-1">--请选择--</option></select>
		城市:<select id="city"><option value="-1">--请选择--</option></select>
	</body>
</html>

2.Servlet

package org.dmc.servlet;

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 org.dmc.domian.City;
import org.dmc.domian.Province;

import net.sf.json.JSON;
import net.sf.json.JSONSerializer;

@WebServlet("/cityServlet")
public class CityServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		req.setCharacterEncoding("UTF-8");
		resp.setContentType("text/html;charset=utf-8");
		String proidStr = req.getParameter("pro");

		if (proidStr==null || proidStr.isEmpty()) {
			// 获取省份
			List<Province> allProvince = Province.getAllProvince();
			JSON json = JSONSerializer.toJSON(allProvince);
			resp.getWriter().print(json);
		} else {
			List<City> citys = City.getCityByProvinceId(Long.valueOf(proidStr));
			JSON json = JSONSerializer.toJSON(citys);
			resp.getWriter().print(json);

		}
	}

}

4.domain
city

package org.dmc.domian;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

/**
 * 城市对象
 * 
 * @author ZhaoYi
 */
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;
	}
}

Province

package org.dmc.domian;

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

	@Override
	public String toString() {
		return "Province [id=" + id + ", name=" + name + "]";
	}
	
}

4.Json

{
	"name":"tom",
	"age":20,
	"sex":true
}

在这里插入图片描述代码结构

乔木晨子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax请求+Servlet+JSon

1.ajax<!DOCTYPE html><html><head><meta charset="UTF-8"><title>ajax</title><script src="jQuery/jquery-1.11.2.min.js"></script><script type="tex...
复制链接

扫一扫