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動態添加元素。