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

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

html部分
1     <select name="mateBelongZ" id="mateBelongZID"  style="width: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动态添加元素。