使用AJAX实现省份和城市的级联显示

Question

各位大神求救啊。告诉我该怎么做

数据是从数据库中获取，测试获取正常。

框架使用的是springMVC
前台代码
function changePro(pro) {
var pro_id = pro;
//异步请求查询ci列表的方法并返回json数组
$.ajax({
url : "/crm/info/findcity",
type : "post",
data :{pro_id:pro_id},
dataType:"json",
async:false,
success : function (ci) {
var txt = request.getAttribute("ci");
var citys = txt.parseJSON();
document.getElementById('ci').innerHTML='';
for(i=0;i<citys.length;i++){
var op = new Option(citys[i].city_id,citys[i].city_name);
document.getElementById('ci').options[i]=op;
}
}
});
}

服务端代码
@RequestMapping(value="/findcity", method = RequestMethod.POST)
public @ResponseBody String findCity(@RequestParam("pro") String pro_id,HttpServletRequest request) throws Exception{
System.out.println(pro_id);
System.out.println("--------");
List<City> ci = dao.findCityByPro(pro_id);
JSONArray obj = JSONArray.fromObject(ci);
String str = obj.toString();
System.out.println(str);
request.setAttribute("ci", str);
return null;
}

一直无法成功，在浏览器的控制台发现，每次选择省份的时候都是提示
[HTTP/1.1 400 Bad Request 23ms]

各位大神求救啊。

Answer 1

你后台把json数组转字符串之后不输出放进request对象中干嘛呢？我用的另一种方法实现的三级联动，省市区的：

<script type="text/javascript">
     jQuery(document).ready(function($){
         $("#province").change(function(){
             var pid=$("#province").val();
             var sectionObj=document.getElementById("section");
             sectionObj.length=0;
             sectionObj.options[0]=new Option("请选择区县",-1);
            sectionObj.value=-1;
             if(pid!=-1){
                 var url="/service_order/getCity.htm";
                 var data={"provinceId":pid};
                  $.post(url,data,function(result){
                      var cityObj=document.getElementById("city");
                      cityObj.length=0;
                      var aryData=null;
                      if(!!(window.attachEvent && !window.opera)){ 
                      //ie 
                         aryData=execScript(result); 
                       }else
                      { //not ie 
                         aryData=eval(result);
                       }
                      cityObj.options[0]=new Option("请选择城市",-1);
                      for(var i=0;i<aryData.length;i++){
                          var city=aryData[i];
                          cityObj.options[i+1]=new Option(city.name,city.id);
                      }
                  });
             }else{
                 var cityObj=document.getElementById("city");
                 cityObj.length=0;
                 cityObj.options[0]=new Option("请选择城市",-1);
                 cityObj.value=-1;
             }
               
         });
         $("#city").change(function(){
             var cid=$("#city").val();
             if(cid!=-1){
                 var url="/service_order/getSection.htm";
                 var data={"cityId":cid};
                  $.post(url,data,function(result){
                      var sectionObj=document.getElementById("section");
                      sectionObj.length=0;
                      var aryData=null;
                      if(!!(window.attachEvent && !window.opera)){ 
                      //ie 
                         aryData=execScript(result); 
                       }else
                      { //not ie 
                         aryData=eval(result);
                       }
                      sectionObj.options[0]=new Option("请选择区县",-1);
                      for(var i=0;i<aryData.length;i++){
                          var section=aryData[i];
                          sectionObj.options[i+1]=new Option(section.name,section.id);
                      }
                  });
             }else{
                 var sectionObj=document.getElementById("section");
                 sectionObj.length=0;
                 sectionObj.options[0]=new Option("请选择区县",-1);
                 sectionObj.value=-1;
             }
               
         });
     });
 </script>

服务端

public void getCity() throws Exception {
        HttpServletResponse res = ServletActionContext.getResponse();
        PrintWriter out = res.getWriter();
        try {
            Map<String, Object> searchMap = new HashMap<String, Object>();
            searchMap.put("provinceId", Long.parseLong(provinceId));
            cityList = som.getObjectsByParams(CodeoemBncCity.class, searchMap,
                    null);
            if (cityList != null) {
                Gson gson = new Gson();
                String result = gson.toJson(cityList);
                out.print(result);
            } else {
                System.out.println("没有获取到城市信息：no citys");
            }
        } catch (Exception e) {
            e.printStackTrace();
        }finally{
            out.flush();
            out.close();
        }
    }

上次一家伙要三级联动我给贴上去了，谁知道没通过规范没发出去，刚好给你贴过来，注意交互部分就好了

追问

选择省份后出现400错误是怎么回事呢？传递参数有问题？section是什么啊？

追答

请求有问题，把dataType的json改成JSON，data的参数格式我记得是{"":""}这样的吧，记不大清除了，你可以试试