json+ajax

Posted 2020-10-07

1.1.1 json数据生成

　　l 将采用json-lib 工具生成

　　l 导入jar包：（注意：重复）

 　　　　

 

　　l api使用：

　　　　JavaBean 或 Map ：JSONObject.fromObject(...).toString();

　　　　List 或 Array：JSONArray.fromObject(...).toString();

　　　　　　

1.1.2 发送 ajax 请求

　　l /ee19_crm/WebRoot/WEB-INF/pages/staff/editStaff.jsp

　　l 步骤：

　　　　1.获得当前选中部门

　　　　2.发送ajax查询职务（获得引擎、设置回调、开发连接、发送请求）

　　　　3.获得数据后，将数据添加到职务的select标签中。

 

<script type="text/javascript">

function showPost(obj){

//1 获得选中部门

var depId = obj.value;

//2 发送ajax，通过部门查询职务

//2.1 获得引擎

var xmlhttp=null;

if (window.XMLHttpRequest){// code for all new browsers

  xmlhttp=new XMLHttpRequest();

} else if (window.ActiveXObject) {// code for IE5 and IE6

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

 

//2.2 设置回调函数

xmlhttp.onreadystatechange = function(){

//请求完成，正常响应

if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

//3 获得数据，并展示 ,手动ajax 获得 json数据 字符串

var textData = xmlhttp.responseText;

//3.1 将字符串 手动 转换 json对象

var jsonData = eval("("+textData+")");

 

// 获得select对象

var postSelectElement = document.getElementById("postSelectId");

postSelectElement.innerhtml = "<option value=‘‘>----请--选--择----</option>";

 

//3.2 遍历

for(var i = 0 ; i < jsonData.length ; i++){

var postObj = jsonData[i];

// 获得职务id

var postId = postObj.postId;

// 获得职务名称

var postName = postObj.postName;

 

//3.3 将数显示到select标签

postSelectElement.innerHTML += "<option value=‘"+postId+"‘>"+postName+"</option>";

}

 

}

};

//2.3 创建连接

var url = "${pageContext.request.contextPath}/postAction_findAllWithDepartment?department.depId=" + depId;

xmlhttp.open("GET", url);

//2.4 发送请求

xmlhttp.send(null);

}

</script>

 

 

/**      * ajax 通过部门 ，查询所有的职务      * @return      * @throws IOException      */     public String findAllWithDepartment() throws IOException{         //1 查询         List<CrmPost> allPost = this.postService.findAll(post.getDepartment());                  //2 将java对象 转换 json数据                  //2.1 排除不需要数据         JsonConfig jsonConfig = new JsonConfig();         jsonConfig.setExcludes(new String[]{"department","staffSet"});         //2.2 转换         String jsonData = JSONArray.fromObject(allPost,jsonConfig).toString();                  //3 将json数据发送给浏览器         //3.1 响应中文乱码         ServletActionContext.getResponse().setContentType("text/html;charset=UTF-8");         //3.2 发送         ServletActionContext.getResponse().getWriter().print(jsonData);                  return "none";     }