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

最新推荐文章于 2021-05-26 06:30:03 发布

innerpeacez

最新推荐文章于 2021-05-26 06:30:03 发布

阅读量413

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/zhwyj1019/article/details/77933919

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

    });
});