jquery+ajax实现二级级联查询

最新推荐文章于 2024-08-20 09:01:32 发布

tntzyf

最新推荐文章于 2024-08-20 09:01:32 发布

阅读量1.6k

点赞数

分类专栏： javascript 文章标签： jquery ajax function import xml jsp

本文链接：https://blog.csdn.net/tntzyf/article/details/2609603

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这是我学习jquery的ajax写的第二个例子~~

查询数据库的过程我就不写了，这个例子是用jsp查询出数据后动态生成xml，ajax在解析这个xml把解析出来的数据放入页面

index.jsp

<%@ page language="java" contentType="text/html; charset=gb2312"

    pageEncoding="gb2312"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>

<script type="text/javascript" src="select.js"></script>

</head>

<body>

省份:<select name="provice" id="province">

<option>省</option>

<option value="1">四川</option>

<option value="2">广东</option>

<option value="3">山东</option>

<option value="4">辽宁</option>

</select>

城市：<select name="city" id="city">

<option selected="selected">请选择</option>

</select>

</body>

</html>

select.js

$(document).ready(function(){

	$("#province").change(function(){

		$("#city").empty();

		$.ajax({

			type:"GET",

			//url:"citylist.jsp",//传入jsp页面来处理

			url:"CityList",//传入servlet来如里

			//dataType:"xml",

			data:"pro_id="+$("#province option:selected").val(),//传递的参数

			//error:function(){alert("error");},

			success:function(xml){

				$(xml).find("cityList").find("city").each(function(){//解析jsp动态生成的xml 

					var name = $(this).find("name").text();

					var city_id = $(this).find("city_id").text();

					$("#city").append("<option value="+city_id+">"+name+"</option>");//把解析出来的书库写入页面

				})

				

			}



		});

	});

});

citylist.jsp

<%@page import="java.io.PrintWriter"%>

<%@page import="com.City"%>

<%@page import="com.GetCityList"%>

<%@page import="java.util.List"%>

<%

String pro_idStr = request.getParameter("pro_id");//获取从select.js传过来的省份编号

int pro_id = Integer.parseInt(pro_idStr);

List<com.City> l = null;

l = com.GetCityList.getcity(pro_id);//以省份编号查询出该省里的城市对象 并存入list

response.setContentType("text/xml;charset=gb2312");//一定要注意写成text/xml 这样才能动态生成xml文件

PrintWriter o = response.getWriter();

o.println("<?xml version=/"1.0/" encoding=/"gb2312/"?>");

o.println("<cityList>");

for(City city:l)

{

	o.println("<city>");

	o.println("<name>"+city.getCity()+"</name>");

	o.println("<pro_id>"+city.getPro_id()+"</pro_id>");

	o.println("<city_id>"+city.getCity_id()+"</city_id>");

	o.println("</city>");

}

o.println("</cityList>");

o.flush();

%>

自己写的例子~~~jquery初学者如有错误请指教谢谢

tntzyf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jquery+ajax实现二级级联查询

这是我学习jquery的ajax写的第二个例子~~查询数据库的过程我就不写了，这个例子是用jsp查询出数据后动态生成xml，ajax在解析这个xml把解析出来的数据放入页面index.jsp<%@ page language="java" contentType="text/html; charset=gb2312" pageEncoding="gb2312"%>
复制链接

扫一扫