ajax调用json数据并显示至columns表格中

最新推荐文章于 2022-11-22 15:24:40 发布

print_Hyon

最新推荐文章于 2022-11-22 15:24:40 发布

阅读量4.3k

点赞数 6

文章标签： ajax 数据 json html columns

本文链接：https://blog.csdn.net/qq_37400312/article/details/77451435

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!--
这篇文章是我第一次通过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":数据记录数组，标点一定不要出错，不然也会导致调用失败

成功后网页显示如下，如有错误或疑问欢迎留言

print_Hyon

关注

6
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
ajax调用json数据并显示至columns表格中

这篇文章是我第一次通过AJAX调用json数据时写的，因为网络上大部分文章解释不太清楚，代码不规范，导致很多新人调用时出现各种问题，在此特意写了这篇博客供新人学习，如有错误或疑问欢迎留言
复制链接

扫一扫