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

前台

后台

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