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     });

方法二、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动态添加元素。