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

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

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

js部分 

    $.ajax({
        url : rootPath+'/jasframework/ycsy/queryCameraBelongZID.do?',
        success : function(result) {
                var seHtml = "";
                for(var i = 0 ;i<result.length; i++) {
                    seHtml += "<option>"+result[i].text+"</option>";
                }
                $("#mateBelongZID").html(seHtml);
        },
        async : true,
        dataType : "json"
    });

方法二、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;
    }

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

    $.ajax({
        url : strUrl,
        success : function(result) {
//            alert(result);
            if(result==null){
                alert("抱歉,所选区域的井暂无层位信息！");
            }else{
                var res = result;
                var arr = res.split(",");
                var seHtml = "";
                for(var val in arr) {
                    seHtml += "<option>"+arr[val]+"</option>";
                }
                $("#cengwei").html(seHtml);
            }
            
//             $("ol").append("<li>Appended item</li>");
        },
        async : true,
        dataType : "text"
    });

前台

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

后台

    /**
     * get 所有生产层位信息
     * 
     * @throws IOException
     */
    @RequestMapping("/getAllCengwei")
    @ResponseBody
    public void getAllCengwei(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String wellNames=request.getParameter("wellNames");
        String str="";
        if(wellNames!=null && !"".equals(wellNames)){
            wellNames=EncodeUtil.urlDecode(wellNames);
            String[] wellName=wellNames.split(";");
            for(int i=0;i<wellName.length;i++){
                str+="'"+wellName[i]+"',";
            }
        }
        String  sql  = "select distinct(cw)cw from  ycsy_newhorizon t where t.Cw  is not Null ";
        if(str!=null && !"".equals(str)){
            sql +="and t.jh in("+str.substring(0, str.length()-1)+") ";
        }
        List list = workareaInfoService.getAllCengwei(sql);
        String cengwei = "";
        for (Iterator iterator = list.iterator(); iterator.hasNext();) {
            String obj = (String) iterator.next();
            cengwei += obj + ",";
        }
        if(cengwei!=null && !"".equals(cengwei)){
            cengwei = cengwei.substring(0,cengwei.length()-1);
        }
        response.setCharacterEncoding("utf-8");
        response.getWriter().write("所有层位," + cengwei);
    }

分析：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动态添加元素。