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];// 获得职务idvar 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"; } |
json+ajax
原文地址:http://www.cnblogs.com/NEU-2015/p/7566738.html