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