combobox遠程加載數據的總結和Json數據的小結

1.從後臺返回請求加載Combobox下拉框數據

html部分
1     <select name="mateBelongZ" id="mateBelongZID"  style="width: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     });

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

 

注意點2、注意返回的數據格式

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