再窥Jquery

最新推荐文章于 2020-06-08 14:46:52 发布

研客9527

最新推荐文章于 2020-06-08 14:46:52 发布

阅读量154

点赞数 1

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/cxl234/article/details/88107373

版权

前端专栏收录该内容

3 篇文章

订阅专栏

本文通过实例展示了如何使用Jquery在前端处理数据回显，分别以XML和JSON两种方式进行。XML部分略过，重点讲解了利用jQuery遍历JSON数据，动态填充城市选择列表的过程。

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

昨天用了Jquery做了仿百度页面，今天做了一个城市选择
前端代码
1.用xml方式进行数据回显

</head>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/city02-json.js"></script>
<body>
	
	省份：<select name="province" id="province">
		<option value="" >-请选择-
		<option value="1"  >广东
		<option value="2"  >湖南
		<option value="3"  >湖北
		<option value="4"  >
	</select>
	
	城市：<select name="city" id="city" >
		<option value="" >-请选择-
	</select>
</body>

这里我先用xml方式对页面进行了显示

$(function(){
//	 1.找到省份的元素，一旦里面的值发生了改变 ，就去请求该省份的城市数据
	 $("#province").change(function(){
		 $.post("/CityServlet",{pid:$(this).val()},function(data,stauts){
//			 遍历
//			 从data数据里找出所有的city然后遍历所有的city
//			 遍历一个city就执行一次function方法
//			 先清空以前的值
			 $("#city").html("<option value='' >-请选择-");
			 $(data).find("city").each(function(){
//				 得到city的子元素cname的文本
				 var id = $(this).children("id").text();
				 var cname = $(this).children("cname").text();
				 $("#city").append("<option value='"+id+"' >"+cname);
				 
			 });
		 });
	 });
	 
});

由于现在用的xml方式不多，这里就不详细介绍了。后面会着重点说json的方式
后端代码

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		int pid = Integer.parseInt(req.getParameter("pid"));
		System.out.println(pid);
		CityDao dao = new CityDaoImpl();
		List<City> list = dao.findCity(pid);
//		返回数据 --> XStream  bena化xml 
		XStream xStream = new XStream();
//		把XML转成一个java对象
//		xStream.fromXML(file)
//		想把id作为属性
//		xStream.useAttributeFor(City.class,"id");
//		设置别名
		xStream.alias("city", City.class);
//		转换成一个对象成xml 字符串
		String xml = xStream.toXML(list);
		System.out.println(xml);
		resp.setContentType("text/xml;charset=utf-8");
		resp.getWriter().write(xml);
	}

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>选择城市</title>
</head>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/city02-json.js"></script>
<body>
	
	省份：<select name="province" id="province">
		<option value="" >-请选择-
		<option value="1"  >广东
		<option value="2"  >湖南
		<option value="3"  >湖北
		<option value="4"  >
	</select>
	
	城市：<select name="city" id="city" >
		<option value="" >-请选择-
	</select>
</body>
</html>

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

$("#city").html("-请选择-"):清空附加的城市名，如果不清空一次的话，会出现全部的城市
$(data).each(function(index,c){： 遍历发布会的json格式的数据（index）索引，（c）:应该是city这个对象
$("#city").append(""+c.cname)：选择城市这个标签，把city.id 和 c.name的值赋给这个标签
后端代码

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		int pid = Integer.parseInt(req.getParameter("pid"));
		CityDao dao = new CityDaoImpl();
		List<City> list = dao.findCity(pid);
		
//		把list集合转成 jSON数据
//		JSONArray ---> 变成集合数组
//		JSONObject --》 变成简单的数据
		String json  = JSONArray.fromObject(list).toString();
		System.out.println(json);
		resp.setCharacterEncoding("utf-8");
		resp.getWriter().write(json);
		
	}