ajax完成省市联动

1.用ajax传输xml文件完成省市联动

  首先创建数据库

省市联动一个province表一个city表,一对多关系

这是province表

pid   pname
1      重庆
2      四川

这是city表

cid     cname     pid
1       沙坪坝区     1
2       江北区      1
3       渝中区      1
4        成都      2
5        眉山        2
6        乐山        2

下拉列表的html代码:

<tr>
                            <td>籍贯</td>
                            <td>
                                <select id="province" name="province" >
                                    <option>-请选择-</option>
                                    <c:forEach var="p" items="${list }">
                                        <option value="${p.pid }">${p.pname }</option>
                                    </c:forEach>
                                </select>
                                <select id="city" name="city">
                                    <option>-请选择-</option>
                                </select>
                            </td>
                        </tr>

给下拉列表绑定change事件

$(function() {
    //绑定事件
    $("#province").change(function(){
        //获取事件改变时传入的pid
        var pid = $(this).val();
        //调用异步
        $.post("/AJAX/CityServlet",{"pid":pid},function(data) {
            //获取到市列表属性
            var $city = $("#city");
            //清空列表属性中的选项
            $city.html("<option>--请选择--</option>");
            $(data).find("city").each(function(i,n){
                var cid = $(this).children("cid").text();
                var cname = $(this).children("cname").text();
                $city.append("<option value=‘"+cid+"‘>"+cname+"</option>");
            });
        });
    });
});

从一个servlet中在数据库获取province数据存入域对象

private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            //调用业务层
            ProvinceService ps = new ProvinceService();
            List<Province> list = ps.getAll();
            request.setAttribute("list", list);
            request.getRequestDispatcher("/regist.jsp").forward(request, response);

        } catch (SQLException e) {
            e.printStackTrace();
            throw new RuntimeException();
        }
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

业务层

ProvinceDao pd = new ProvinceDao();
    public List<Province> getAll() throws SQLException {
        //调用dao层
        List<Province> list = pd.getAll();
        return list;
    }

dao层

QueryRunner qr = new QueryRunner(JDBCUtils.getDataSource());
    public List<Province> getAll() throws SQLException {

        List<Province> list = qr.query("select * from province", new BeanListHandler<Province>(Province.class));
        return list;
    }

编写异步的servlet

private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            String pid = request.getParameter("pid");
            ProvinceService ps = new ProvinceService();
            List<City> list = ps.selectById(pid);
            //将list转换成xml文件
            XStream xs = new XStream();
            //修改标签名
            xs.alias("city", City.class);

            String xmlStr = xs.toXML(list);

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

            response.getWriter().write(xmlStr);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

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

service层

public List<City> selectById(String pid) throws SQLException {
        List<City> list = pd.selectById(pid);
        return list;
    }

dao层

public List<City> selectById(String pid) throws SQLException {
        List<City> list = qr.query("select * from city where pid = ?", new BeanListHandler<City>(City.class), pid);
        return list;
    }

2.改用json传输异步数据

其余的地方不变,只需要该servlet和jq代码
servlet代码:

private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            String pid = request.getParameter("pid");
            ProvinceService ps = new ProvinceService();
            List<City> list = ps.selectById(pid);
            //将list集合转成json
            JsonConfig jc = new JsonConfig();
            //去除不需要的字段
            jc.setExcludes(new String[]{"pid"});
            //将list集合转换成json对象
            JSONArray jsonArray = JSONArray.fromObject(list, jc);
            System.out.println(jsonArray);

            response.setContentType("text/html;charset=UTF-8");
            //将json对象转换成字符串发出
            response.getWriter().println(jsonArray.toString());

        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

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

jq代码

$(function() {
    //绑定事件
    $("#province").change(function(){
        //获取事件改变时传入的pid
        var pid = $(this).val();
        //调用异步
        $.post("/AJAX/JsonServlet",{"pid":pid},function(data) {
            //获取到市列表属性
            var $city = $("#city");
            //清空列表属性中的选项
            $city.html("<option>--请选择--</option>");
            $(data).each(function(i,n){
                $city.append("<option value=‘"+n.cid+"‘>"+n.cname+"</option>");
            });
        },"json");
    });
});
时间: 2024-10-09 21:04:18

ajax完成省市联动的相关文章

JQuery+Ajax制作省市联动

1 $(document).ready(function () { 2 $("#Province").append("<option value=''>" + "--请选择--" + "</option>"); 3 $("#City").append("<option value=''>" + "--请选择--" + "&

基于jQuery+JSON的省市联动效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

AJAX案例四:省市联动

1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 3 4 5 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4

jquery ajax实现省市二级联动

今天给大家带来使用jQuery ajax实现的省市联动效果.我们直奔主题,先说下实现思路: 准备数据 这里数据库我使用的是mysql,先看下表格: provience表 city表 这里使用provience表的主键作为city表的外键,等下根据省份的id查找对应的市区 查询方法的封装 接下来就是实现查询所有省市以及根据省份id查找对应的城市的方法,这里我写了一个BaseDao封装了一些基本的数据库链接以及关闭连接的方法: BaseDao.java package com.jqueryajax.

php省市联动实现

设计模式:ajax实现,数据库格式:id,name,parent_id 数据库: CREATE TABLE IF NOT EXISTS `city` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(30) DEFAULT NULL, `parent_id` int(11) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREME

省市联动 js

工作中见到这个省市联动代码,虽然很简单也能写出来,还是随便把它记录下来. //省市联动 function area(obj_id, area_pId, data_call_back) { if (area_pId == -1) return; $.ajax({ type: 'GET', url: "/SysAdmin/Pages/tb_supplierAdd.aspx", data: { area_pId: area_pId }, dataType: 'json', success:

AJAX省市区三级联动下拉列表实现 JAVA开发

转载自:http://blog.sina.com.cn/s/blog_a48af8c001011lx1.html 例子--District Picker            http://fengyuanchen.github.io/distpicker/ 此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为: $(document).ready(function(){   

Json 基于jQuery+JSON的省市联动效果

helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. 查看演示 下载源码 HTML 首先在head中载入jquery库和cityselect插件. <script type="tex

注册页面-省市联动

自己做的Demo,搭建好了ssm框架之后,做了一个注册页面. 先用同步的方式从数据库取数据,但是用js在页面上一直取不出数据,数据格式为json,反复检查数据没问题. 问题分析,应该是同步请求html页面,同时js再请求其他的数据,导致错误,改为采用Ajax异步请求省份城市信息,成功. 1 //省市联动 2 var provices = []; 3 var citys = []; 4 var locations = null; 5 //Ajax请求后端数据 6 $.ajax({ 7 async: