JSON例子

最新推荐文章于 2024-10-01 20:12:28 发布

lhb739921140

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量84

点赞数

分类专栏： JSON 文章标签： json Ajax JavaScript 浏览器 C ViewUI

本文链接：https://blog.csdn.net/lhb739921140/article/details/83637081

版权

JSON 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.一个简单的列子
需求分析：在一个页面中，有个公司的下拉框，列出了不同的几个公司，当我选择其中一个公司的时候，
右侧该公司对应的机构列表和类型的下拉框也要实现联动效果，当然常规的ajax就可以实现，下面看下ajax和json是如何结合使用的!
1).<select name="corpId" οnchange="getOrgs(this)" id="corpId" >
   <option value="">--请选择公司---</option>
   <c:forEach var="corp" items="${corps}">
    <option value="${corp.id }">
     ${corp.name }
    </option>
   </c:forEach>
</select>
2).首先构造ajax的getXMLHTTPRequest函数,保持独立通用性
function getXMLHTTPRequest(){
   var xmlHttp=null;
   if(window.XMLHttpRequest){
    xmlHttp = new XMLHttpRequest();
   }else if(ActiveXObject){
    try{
     xmlHttp = new ActiveXObject("Miscrosoft.XMLHTTP");
    }catch(e){
       try{
     　xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
     }catch(e){
       alert("不支持的浏览器类型!!");
     }
    }
   }
   return xmlHttp;
}
3).当公司的下拉列表发生改变时，就会调用：οnchange="getOrgs(this)"函数
function getOrgs(obj){
   var corpid = obj.options[obj.selectedIndex].value;
   var url = "car.shtml?action=getOrgCorpTypeByCorpId&corpid="+corpid+";
   dealWithAjax(url,setOrgs);
}
4).调用dealWithAjax函数
function dealWithAjax(url,back){
   var xmlHttp = getXMLHTTPRequest();
   if(xmlHttp){
    xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=function(){
      back(xmlHttp);
    };
    xmlHttp.send(null);
   }
}
5).下面看下回调函数，即setOrgs(xmlHttp)函数
function setOrgs(xmlHttp){
   if(xmlHttp.readyState==4){
     if(xmlHttp.status==200){
      var text= xmlHttp.responseText;
      if(!/^\s*$/.test(text))
      setOrg(text);
       }
    }
}
6).再看下setOrg(text)函数
function setOrg(text){
   var area = document.getElementById("aresId");
   var type = document.getElementById("corptype");
   area.options.length = 0;
   type.options.length = 0;

   var jsonInfo = eval(text);//eval是js中转换函数
   for(var i = 0; i < jsonInfo.length; i++){
    var info = jsonInfo[i];
    if(info.type){ //如果对象有type属性，那么该对象就是Datadict对象
     type.options.add(new Option(info.name,info.id)) ;
    }else { //否则，就是Org对象
     area.options.add(new Option(info.name,info.id));
    }
   }
}
7).下面看下action中的结果集是如何返回到javascript中的
public ActionForward getOrgCorpTypeByCorpId(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception {
   String corpId = request.getParameter("corpid");
   Corp corp = new Corp();
   corp.setId(corpId);
   corp = corpService.getInfo(corp);
   String areas = corp.getAreaId();
   String[] areaStrings = areas.split(",");
   List resultList = new ArrayList();
   for (String area : areaStrings) {
    Org org = new Org();
    org.setId(area);
    resultList.addAll(orgService.getAllList(org));
   }
   String corpTypes = corp.getCorptype();
   if (corpTypes != null) {
    String[] corpTypteStrings = corpTypes.split(",");
    for (String corpType : corpTypteStrings) {
     Datadict datadict = new Datadict();
     datadict.setId(corpType);
     resultList.addAll(datadictService.getList(datadict));
    }
   }
   JSONArray ar = JSONArray.fromObject(resultList);//这一步是转换成JSONArray
   PrintWriter writer = response.getWriter();
   writer.print(ar);//这一步就是输出结果集
   return null;
}