欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

注册页面-省市联动

程序员文章站 2022-05-26 23:36:16
自己做的Demo,搭建好了ssm框架之后,做了一个注册页面。 先用同步的方式从数据库取数据,但是用js在页面上一直取不出数据,数据格式为json,反复检查数据没问题。 问题分析,应该是同步请求html页面,同时js再请求其他的数据,导致错误,改为采用Ajax异步请求省份城市信息,成功。 ......

自己做的demo,搭建好了ssm框架之后,做了一个注册页面。

先用同步的方式从数据库取数据,但是用js在页面上一直取不出数据,数据格式为json,反复检查数据没问题。

问题分析,应该是同步请求html页面,同时js再请求其他的数据,导致错误,改为采用ajax异步请求省份城市信息,成功。

 1 //省市联动
 2 var provices = [];
 3 var citys = [];
 4 var locations = null;
 5 //ajax请求后端数据
 6 $.ajax({  
 7     async:true,  
 8     type: "get",  
 9     url: "../location/findall.do",//注意路径                   
10     success:function(data){
11         
12         locations = data.citylist;
13         $.each(locations, function(i,n) {
14             var pojo = locations[i];
15             
16             if(pojo.proviceid == '0'){//proviceid == '0'==>是省份
17                 provices.push(pojo);
18             }else{
19                 citys.push(pojo);
20             }
21          });
22         
23         //向省份中添加选项
24         $.each(provices, function(i,n) {
25             $("#proviceselect").append("<option value='"+n.id+"'>"+n.name+"</option>");
26         });
27         
28      },
29  });
30  
31 
32 //城市选项框,监控省份选项的变化
33 $("#proviceselect").change(function(){
34     //先清空之前的城市选项
35     $("#cityselect").empty();
36     //得到省份的id
37     var pid = $("#proviceselect").val();
38     //遍历城市集合,拿出proviceid和pid相等的城市,放入选项框
39     $.each(citys,function(i,n){
40         var city = citys[i];
41         if(city.proviceid == pid){
42             $("#cityselect").append("<option value='"+city.id+"'>"+city.name+"</option>");
43         }
44     })
45 });