jquery实现省市联动的两种方式（xml，，，json）

最新推荐文章于 2024-06-12 11:42:01 发布

qq_42799000

最新推荐文章于 2024-06-12 11:42:01 发布

阅读量590

点赞数

本文链接：https://blog.csdn.net/qq_42799000/article/details/82634220

版权

省市联动，xml传值方式

导入相应的jar

创建表单

<%@ 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>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
// 这个是用xml传数据 的js
 <script type="text/javascript" src="js/cityjs.js"></script> 
</head>
<body>
//向后端传value的值，进行查找
<select id="vv">
<option >--请选择--</option>
<option value="1">--河南--</option>
<option value="2">--苏州--</option>
<option value="3" >--广东--</option>
</select>

<select id="c">
<option >--请选择--</option>
</select>
</body>
</html>

创建js

//标准格式不解释
$(function() {
//创建事件，当该标签的值被改变时事件被触发
    $("#vv").change(function() {
//获取被监视的标签的值
        //$("#province").varl();
        var pid = $(this).val();       
        //创建post请求，传值pid，执行事件function，data表示servlet传过来的值
        $.post( "/checkUsername/cityservlet",{pid:pid} ,function(data,status){
        //写html数据到城市下来列表框，因为写数据用的时追加，所以在每一次切换的时候需要对数据进行重置
            $("#c").html("<option >--check--")
            //对servlet传过来的值进行处理
            //查找标签时city，然后遍历，执行function
            $(data).find("city").each(function() {
            //获取city标签的子标签的文本框的id
                var id = $(this).children("id").text();
            //获取city标签的子标签的文本框的城市名
                var cname = $(this).children("cname").text();
        //写html数据到城市下来列表框               
                $("#c").append("<option value='"+id+"' >"+cname)
            });
        } );
    });
});

创建servlet，dao

        try {
            request.setCharacterEncoding("UTF-8");
            int pid=Integer.parseInt(request.getParameter("pid"));
            checkdao c=new checkImpl();
            List<city> list = c.findcity(pid);
        //创建XStream工具类的对象
            XStream xs=new XStream();
            //自己手动设置转化成xml后的标签的名字，默认为类的全路径
            xs.alias("city", city.class);
            //将数据转换为xml
            String xml = xs.toXML(list);

            System.out.println(xml);


            response.setContentType("text/xml;charset=utf-8");
            response.getWriter().write(xml);    
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

省市联动，json传值方式

导入相应的jar

创建表单

<%@ 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>Insert title here</title>
//这是json数据的js
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/cityjson.js"></script>
</head>
<body>
<select id="vv">
<option >--请选择--</option>
<option value="1">--河南--</option>
<option value="2">--苏州--</option>
<option value="3" >--广东--</option>
</select>

<select id="c">
<option >--请选择--</option>
</select>
</body>
</html>

创建js

//格式化东西
$(function(){
//监听标签，当其值被改变的时被触发执行function
    $("#vv").change(function() {
        var pid=$(this).val();
//创建post请求，传值pid，执行事件function，data表示servlet传过来的值
        $.post("/checkUsername/jsonservlet",{pid:pid},function(data,status){
//写html数据到城市下来列表框，因为写数据用的时追加，所以在每一次切换的时候需要对数据进行重置
            $("#c").html("<option value='' >--check--");
//遍历data数据执行function，，i表示下标，，，c表示遍历收到的数据            
            $(data).each(function(i,c) {
            //将值写入下拉标签
                $("#c").append("<option value='"+c.pid+"'>"+c.cname);          
            });
            //需要手动加上json，不然不识别。
        },"json");
    });
});

创建servlet，dao

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            request.setCharacterEncoding("UTF-8");


            int pid=Integer.parseInt(request.getParameter("pid"));
            checkdao c=new checkImpl();
            List<city> list = c.findcity(pid);
            JSONArray ja=JSONArray.fromObject(list);

            String json = ja.toString();

            System.out.println(json);

            response.setContentType("text/xml;charset=utf-8");
            response.getWriter().write(json);

        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

}

qq_42799000

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery实现省市联动的两种方式（xml，，，json）

省市联动，xml传值方式导入相应的jar创建表单&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
复制链接

扫一扫