数据以json格式传到jsp页面

json格式：{name: '张三', age: 20, sex: "男"}

第一步：引入 fastjson-1.2.47.jar 包和 jquery.js 文件

第二步：写servlet层

public void getlist(HttpServletRequest req, HttpServletResponse resp) {
	resp.setContentType("text/json;charset=UTF-8"); // 设置json的字符编码，中文乱码
	try {
		int id = Integer.valueOf(req.getParameter("id")); // 得到jsp页面传过来的id
		Role role = roleDao.load(id); // 根据id查询数据库
		String str = JSONObject.toJSONString(role); // 把role转换为json数据发到前端
		PrintWriter out = resp.getWriter();
		out.println(str);
		out.flush(); // 刷新，把缓存区的数据发出去
		out.close(); // 关闭
	} catch (IOException e) {
		e.printStackTrace();
	}
}

第三步：在jsp页面写ajax方法

<script type="text/javascript">
    $(function() { // 当页面载入完毕后执行
        $(".look").on("click", function() {
        var id = $(this).find("input").val(); // 得到设置在input的id值
            $.ajax({
                type: "post",
                url: "${pageContext.request.contextPath}/role?method=getlist&id=" + id,
                // dataType: "json", // 指定后台传来的数据是json格式
                success: function(data){
                    // 利用json解析器 JSON.parse(data) 的方式
                    // var json = JSON.parse(data); // 将数据转为json对象
                    var name = "";
                    // 多表连接查询时，循环遍历出数组中的对象
                    for(var i = 0; i < data.menus.length; i++){
                        name += data.menus[i].name + " , ";
                    }
                    //去掉最后一个逗号和两边的空格(如果不需要去掉，就不用写)
                    if (name.length > 0) {
                        name = name.substr(0, name.length - 3);
                    }
                    var da = new Date(data.createtime); // 得到时间戳
                    var year = da.getFullYear();
                    var month = da.getMonth() + 1;
                    var date = da.getDate();
                    var createtime = [year,month,date].join('-'); // 格式化时间戳

                    // <div></div>格式用 .html 赋值
                    // $("#showId").html(data.id);
                    // $("#showName").html(data.name);
                    // $("#showDescription").html(data.description);
                    // $("#showCreatetime").html(createtime);
                    // $("#showMenu").html(name);

                    // <input>格式用 .val 赋值
                    $("#showId").val(data.id);
                    $("#showName").val(data.name);
                    $("#showDescription").val(data.description);
                    $("#showCreatetime").val(createtime);
                    $("#showMenu").val(name);
                },
                error: function(err){}
            })
        })
    })
</script>

<a class="btn btn-info look" style="margin-right: 3px" data-toggle="modal" data-target="#show">
    <input type="hidden" value="${role.id }">查看
</a>

<form>
	<div class="form-group">
		<label for="exampleInputEmail1">ID</label>
		<input disabled="disabled" type="text" class="form-control" id="showId">
	</div>
	<div class="form-group">
		<label for="exampleInputEmail1">角色名称</label>
		<input disabled="disabled" type="text" class="form-control" id="showName">
	</div>
	<div class="form-group">
		<label for="exampleInputPassword1">角色描述</label>
		<input disabled="disabled" type="text" class="form-control" id="showDescription">
	</div>
    <div class="form-group">
        <label for="exampleInputPassword1">权限列表</label>
        <input disabled="disabled" type="text" class="form-control" id="showMenu">
    </div>
	<div class="form-group">
		<label for="exampleInputPassword1">创建时间</label>
		<input disabled="disabled" type="text" class="form-control" id="showCreatetime">
	</div>
</form>

 常见的 JSON 格式

{"key":"value"} // 最简单的JSON格式

{"key1":"value1","key2":"value2"} // 一个JSON中有多个键值对的表达方式

{"key":["a","b","sojson.com"]} // value是一个Array的JSON格式

{"sojson":["5年","JSON在线解析","sojson.com",true,1,null]} // value是一个Array的JSON格式，并且这个数组中有多重类型的元素，有String，Boolean，Number，null

{"key":{"json":"json for javascript"}} // value是JSONObject的JSON格式