码迷,mamicode.com
首页 > Web开发 > 详细

json+ajax

时间:2017-09-21 09:49:51      阅读:347      评论:0      收藏:0      [点我收藏+]

标签:stat   width   eva   lib   对象   完成   pen   ros   map   

1.1.1 json数据生成

  l 将采用json-lib 工具生成

  l 导入jar包:(注意:重复)

     技术分享

 

  l api使用:

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

    List ArrayJSONArray.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";
    }

 

json+ajax

标签:stat   width   eva   lib   对象   完成   pen   ros   map   

原文地址:http://www.cnblogs.com/NEU-2015/p/7566738.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!