<!--
这篇文章是我第一次通过AJAX调用json数据时写的,因为网络上大部分文章解释不太清楚,代码不规范,
导致很多新人调用时出现各种问题,在此特意写了这篇博客供新人学习,如有错误或疑问欢迎留言
-->
<!DOCTYPE "欢迎访问我的博客:http://blog.csdn.net/qq_37400312">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax调用json数据并显示至columns表格中</title>
<!--这里注意你的jquery存放的位置,注意修改-->
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<!--这里是重点-->
<script type="text/javascript">
$(function () {
$.ajax({
//这里开始调用json数据,json的文件内容在后面会有介绍和范例
url: "data.json",//data.json为数据的文件名,我将它与此网页放在同一目录下
type: "post",//请求方式为POST
data:{},//data设置为空,这里不进行解释了
dataType: "json",//数据类型设置为json
success: function (data) {
$('#tt').datagrid({
//这里开始建立表格
url: 'data.json',//再写一遍data.json
title: '表格',//表格标题
width:400,//表格宽度
height:200,//表格高度
columns:[[
{title:'',field:'ck', checkbox:true, width:10, rowspan:2,align:'center'},
//上面这个是选项框,下面是将调用的json数据插入到表格相应的位置
{title:'姓名',field:'name',width:100,rowspan:2,align:'center'},
{title:'年龄',field:'age',width:50,rowspan:2,align:'center'},
{title:'班级',field:'class',width:100,rowspan:2,align:'center'}
]],
});
}
});
});
</script>
</head>
<!--将表格内容显示到网页中来-->
<table id="tt">
</table>
</body>
</html>
<!--注意:调用数据要在服务器上运行,如果在本地直接打开是无法进行json调用的,建议在编译器里用Tomcat尝试打开-->
下面是json文件,文件名为data.json,与网页存放于同一目录下
{"total":66,"rows":[
{"name":"张三","age":"15","class":"15网络"},
{"name":"李四","age":"22","class":"17软件"},
{"name":"王五","age":"33","class":"16信息"},
{"name":"叫兽","age":"21","class":"15网络"}
]}
json文件注意:“total”:总记录数量 , "rows":数据记录数组,标点一定不要出错,不然也会导致调用失败
成功后网页显示如下,如有错误或疑问欢迎留言