ajax实现选择省份带出城市(从数据库取数据)

数据库有两张表,省份表和城市表。城市表有外键--省份ID


首先是前端页面上的内容(城市信息也可以从数据库取,不过我偷懒,就直接写在页面了)

<div class="set-box"><label class="box-title">所在城市</label><select class="newmap">
    <option value="北京" selected="selected">北京</option>
    <option value="上海">上海</option>
    <option value="广东">广东</option>
    <option value="深圳">深圳</option>
    <option value="天津">天津</option>
    <option value="江苏">江苏</option>
    <option value="浙江">浙江</option>
    <option value="河北">河北</option>
    <option value="山西">山西</option>
    <option value="内蒙古">内蒙古</option>
    <option value="辽宁">辽宁</option>
    <option value="吉林">吉林</option>
    <option value="黑龙江">黑龙江</option>
    <option value="安徽">安徽</option>
    <option value="福建">福建</option>
    <option value="江西">江西</option>
    <option value="山东">山东</option>
    <option value="河南">河南</option>
    <option value="湖北">湖北</option>
    <option value="湖南">湖南</option>
    <option value="广西">广西</option>
    <option value="海南">海南</option>
    <option value="重庆">重庆</option>
    <option value="四川">四川</option>
    <option value="贵州">贵州</option>
    <option value="云南">云南</option>
    <option value="西藏">西藏</option>
    <option value="陕西">陕西</option>
    <option value="甘肃">甘肃</option>
    <option value="青海">青海</option>
    <option value="宁夏">宁夏</option>
    <option value="新疆">新疆</option>
    <option value="台湾">台湾</option>
    <option value="香港">香港</option>
    <option value="澳门">澳门</option>
</select>
    <select class="is2">

    </select>
</div>
然后js代码

$(".newmap").change(function (e) {
    var thistext = $(this).val();
    $.getJSON("你提交的uri?",
        {"thistext": thistext},
        function(result){
        var is2HTML = "";
        $.each(result, function(i, field){
            is2HTML += "<option value="+ field +">"+ field +"</option>"
        });
        $(".is2").html(is2HTML);
    });
    e.stopPropagation();
});

最后是后台controller(就是你提交的地方)

@RequestMapping("/findCity")
public void findCity(HttpServletRequest request, HttpServletResponse response) 
throws IOException{
    request.setCharacterEncoding("utf-8");
    response.setCharacterEncoding("utf-8");
    String thistext = request.getParameter("thistext");
//自己写的通过省份名称查找到省份ID,
    Country country = countryService.selectCountryId(thistext);
    Integer id = country.getCountryId();
//通过省份ID查找到城市
    List<City> city = cityService.selectByCountryId(id);
    List<String> cityName = new ArrayList<>();
    for (int i = 0; i < city.size(); i++) {
        cityName.add(city.get(i).getCityName());
    }
//利用fastjson将list转成String
    String listjson = JSON.toJSONString(cityName);
//传回页面
    response.getWriter().append(listjson);



  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值