注册页面-省市联动

Posted 2021-02-12 runwithraining

自己做的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 });