combobox远程加载数据的总结和Json数据的小结

1.从后台返回请求加载Combobox下拉框数据

html部分
1     <select name="mateBelongZ" id="mateBelongZID"  style="142px;height:20px;font-size:13px;border:1px solid teal">
2      </select>

js部分

 1     $.ajax({
 2         url : rootPath+'/jasframework/ycsy/queryCameraBelongZID.do?',
 3         success : function(result) {
 5                 var seHtml = "";
 6                 for(var i = 0 ;i<result.length; i++) {
 7                     seHtml += "<option>"+result[i].text+"</option>";
 8                 }
 9                 $("#mateBelongZID").html(seHtml);
10         },
11         async : true,
12         dataType : "json"
13     });

方法二、easyUI的combobox控件

    
    $("#mateBelongZID").combobox({  
        url : rootPath+'/jasframework/ycsy/queryCameraBelongZID.do?',
        valueField:'id',   
        textField:'text'  
    });  
    //调整选择下拉框的宽度
    setComboObjWidth("mateBelongCID","0.44","combobox");
    setComboObjWidth("mateBelongZID","0.44","combobox");

两种方法后台返回的数据格式均为Json格式的数据

Controller层
/**
     * 查询摄像头所属的占
     * @return
     */
    @RequestMapping("/queryCameraBelongZID")
    @ResponseBody
    public List queryCameraBelongZID(HttpServletRequest request){
        // 把登录用户信息推送到业务类
        List<?> list = cameraInfoService.queryCameraBelongZID();
        return list;
    }
    
service层
/**
 * 查询摄像头所属的站
 */
    @Override
    public List queryCameraBelongZID() {
        // TODO Auto-generated method stub
        String sql = "from   VectorInfo  where   parenteventid = 202 ";
//        String sql = "select * from   YCSY_VectorInfo where   parenteventid = 202  vectorname is null    and  workareaname like '%站' and parenteventid !=14";
        List<VectorInfo> list = workareaInfoDao.queryCameraBelongZID(sql);
        List list1 = new ArrayList();
        for(VectorInfo  CameraInfo: list){
            Map<String,String> map= new HashMap<String,String>();
            map.put("id", CameraInfo.getWorkareaName());
            map.put("text",  CameraInfo.getWorkareaName());
            list1.add(map);
        }
        return list1;
    }

注意点二、注意返回的数据格式

 1     $.ajax({
 2         url : strUrl,
 3         success : function(result) {
 4 //            alert(result);
 5             if(result==null){
 6                 alert("抱歉,所选区域的井暂无层位信息！");
 7             }else{
 8                 var res = result;
 9                 var arr = res.split(",");
10                 var seHtml = "";
11                 for(var val in arr) {
12                     seHtml += "<option>"+arr[val]+"</option>";
13                 }
14                 $("#cengwei").html(seHtml);
15             }
16             
17 //             $("ol").append("<li>Appended item</li>");
18         },
19         async : true,
20         dataType : "text"
21     });

前台

1 <td>
2      <select id="cengwei" style="border:1px solid teal;" >
3 <!--         <option>所有层位</option> -->
4     </select>

后台

 1     /**
 2      * get 所有生产层位信息
 3      * 
 4      * @throws IOException
 5      */
 6     @RequestMapping("/getAllCengwei")
 7     @ResponseBody
 8     public void getAllCengwei(HttpServletRequest request, HttpServletResponse response) throws IOException {
 9         String wellNames=request.getParameter("wellNames");
10         String str="";
11         if(wellNames!=null && !"".equals(wellNames)){
12             wellNames=EncodeUtil.urlDecode(wellNames);
13             String[] wellName=wellNames.split(";");
14             for(int i=0;i<wellName.length;i++){
15                 str+="'"+wellName[i]+"',";
16             }
17         }
19         String  sql  = "select distinct(cw)cw from  ycsy_newhorizon t where t.Cw  is not Null ";
20         if(str!=null && !"".equals(str)){
21             sql +="and t.jh in("+str.substring(0, str.length()-1)+") ";
22         }
24         List list = workareaInfoService.getAllCengwei(sql);
25         String cengwei = "";
26         for (Iterator iterator = list.iterator(); iterator.hasNext();) {
27             String obj = (String) iterator.next();
28             cengwei += obj + ",";
29         }
30         if(cengwei!=null && !"".equals(cengwei)){
31             cengwei = cengwei.substring(0,cengwei.length()-1);
32         }
33         response.setCharacterEncoding("utf-8");
34         response.getWriter().write("所有层位," + cengwei);
35     }

分析：1.方法一和注意点二返回的一个是JSon格式的数据一个是字符串，两者都是用Ajax进行求，后台的返回的返回数据格式，前台的数据解析格式也不一样，注意点二（ dataType : "text"）

方法一（ dataType :"json"）。另外关于解析json的数据格式的总结：用ajax进行请求（dataType :"json"解析，或者var obj = JSON.stringify(data) ,或者

var result = eval('(' + data + ')');

,var obj = JSON.parse(result); ）。

2.注意Jquery动态添加元素。