这是我学习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初学者 如有错误请指教 谢谢