您的位置：首页 > 其它

ajax完成异步的省市联动效果--使用xml接收数据

2017-09-11 15:44 411 查看

xStream可以轻易的将Java对象和xml文档相互转换，而且可以修改某个特定的属性和节点名称。

需要导入xStream的两个jar包

例子：

获得省信息的代码：

package servlet;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import model.Province;
import service.ProvinceServince;

public class GetProvinceServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ProvinceServince provinceServince = new ProvinceServince();

List<Province> provinces = null;
try {
provinces = provinceServince.getProvince();
} catch (SQLException e) {
e.printStackTrace();
}

request.setAttribute("provinces", provinces);
request.getRequestDispatcher("/province_city.jsp").forward(request, response);
}

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

}

jsp代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!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">
<script type="text/javascript" src="${ pageContext.request.contextPath }/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${ pageContext.request.contextPath }/js/xmlDemo.js"></script>
<title>Insert title here</title>
</head>
<body>
<select id="province">
<option>-请选择-</option>
<c:forEach var="p" items="${ provinces }" >
<option value="${ p.proID }">${ p.proName }</option>
</c:forEach>
</select>
<select id="city">
<option>-请选择-</option>
</select>
</body>
</html>

通过省的id得到数据库中对应的市/区的代码：

package servlet;

import java.io.IOException;
import java.sql.SQLException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.thoughtworks.xstream.XStream;

import dao.City;
import service.ProvinceServince;

public class Demo extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// post方式提交设置可接收中文
request.setCharacterEncoding("UTF-8");

String proID = request.getParameter("province");
ProvinceServince provinceServince = new ProvinceServince();
try {
List<City> city = provinceServince.getCity(proID);
// 将city集合转化成xml文件传递 到JSP中
XStream xStream = new XStream();
// 设置标签名
xStream.alias("city", City.class);

// 设置子标签作为标签属性出现
/*xStream.useAttributeFor(City.class, "cityID");
xStream.useAttributeFor(City.class, "cityName");
xStream.useAttributeFor(City.class, "proID");*/

// 将集合转化成xml
String xmlStr = xStream.toXML(city);

// 设置写到JSP的字符集，包含中文,并作为xml文件被解析
response.setContentType("text/xml;charset=utf-8");

// 将xml文件传递到JSP中
response.getWriter().println(xmlStr);

} catch (SQLException e) {
e.printStackTrace();
throw new RuntimeException();
}

}

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

}

JS代码：

$(function() {
$("#province").change(function() {
var $proID = $("#province").val();
//alert($province);
$.post(
"/day18/Demo",
{"province":$proID},
function(data){
var $city = $("#city");

//每次添加之前清空select，html()方法会覆盖掉原有的内容
$city.html("<option>-请选择-</option>");

// 遍历data中的数据
$(data).find("city").each(function() {
var $cityID = $(this).children("cityID").text();
var $cityName = $(this).children("cityName").text();

// 在City中添加子元素
$city.append("<option value='"+$cityID+"'>"+$cityName+"</option>");
});
}
);

});
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航