Table中获取url数据的问题

提问 未结 16 2450
jianfeng
jianfeng 2017-12-29
悬赏:20飞吻
版本:layui 2.2.45 浏览器:chrome
以下代码

table.render({
elem: '#test'
,url: 'www.layui.com/demo/table/user/'
,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
,cols: [[
{field:'id', title: 'ID', sort: true}
,{field:'username', title: '用户名'} //width 支持:数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度,layui 2.2.1 新增
,{field:'sex', title: '性别', sort: true}
,{field:'city', title: '城市'}
,{field:'sign', title: '签名'}
,{field:'classify', title: '职业', align: 'center'} //单元格内容水平居中
,{field:'experience', title: '积分', sort: true, align: 'right'} //单元格内容水平居中
,{field:'score', title: '评分', sort: true, align: 'right'}
,{field:'wealth', title: '财富', sort: true, align: 'right'}
]]
});

执行后,页面显示“数据接口请求异常”,请问是什么原因?
回帖
  • AggerChen
    2017-12-29
    接口返回的响应参数不对应。table默认的响应参数为
    {
    statusName: 'code',
    statusCode: 0,
    msgName: 'msg',
    dataName: 'data',
    }
    0 回复
  • jianfeng
    2017-12-29
    @AggerChen

    不太明白你的意思,我是从

    http://www.layui.com/demo/table.html

    中拷贝的代码,

    为了测试,仅仅把url从

    /demo/table/user/

    改成了

    www.layui.com/demo/table/user/

    我在浏览器中验证了www.layui.com/demo/table/user/是有数据的。

    数据内容如下:

    {"code":0,"msg":"","count":1000,"data":[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"classify":"词人","score":14},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75}]}

    请能再详细地解释一下吗?
    0 回复
  • AggerChen
    2017-12-29
    @jianfeng 嗯 貌似没问题啊。。你能截个图看看报错么
    0 回复
  • jianfeng
    2017-12-29
    0 回复
  • 灵梦
    2017-12-29
    在线地址好像跨域了 我把这个www.layui.com/demo/table/user/ 数据复制之后 放在json中 然后在URL引入这个json 数据是可以出来的 放在线地址 报错“No 'Access-Control-Allow-Origin' header is present on the requested resource. therefore not allowed access. The response had HTTP status code” ps:我也是刚接触layui的小白 如有错误请指正
    0 回复
  • jianfeng
    2017-12-29
    @AggerChen
    下面是我的html文件
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="http://res.layui.com/layui/dist/css/layui.css" media="all">
    <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    </head>
    <body>

    <table class="layui-hide" id="test"></table>


    <script src="http://res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->

    <script>
    layui.use('table', function(){
    var table = layui.table;

    table.render({
    elem: '#test'
    ,url:'http://www.layui.com/demo/table/user/'
    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
    ,cols: [[
    {field:'id', width:80, title: 'ID', sort: true}
    ,{field:'username', width:80, title: '用户名'}
    ,{field:'sex', width:80, title: '性别', sort: true}
    ,{field:'city', width:80, title: '城市'}
    ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
    ,{field:'experience', title: '积分', sort: true}
    ,{field:'score', title: '评分', sort: true}
    ,{field:'classify', title: '职业'}
    ,{field:'wealth', width:137, title: '财富', sort: true}
    ]]
    });
    });
    </script>

    </body>
    </html>
    0 回复
  • AggerChen
    2017-12-29
    @jianfeng 嗯 应该是跨域了,你把json下载下来 在本地运行试试吧
    0 回复
  • jianfeng
    2017-12-29
    @灵梦

    谢谢!你这个应该是正解。

    但是,layui是不是不应该作这个限制。

    PS:在URL中访问本地json数据的写法是怎样的?能把代码贴出来看看吗?

    再次感谢!
    0 回复
  • 灵梦
    2017-12-29
    跨域不是layui限制的吧。。。我记得是浏览器的一种保护机制。然后json数据很简单啊 你把那个测试用数据 复制 然后放在json中 如 test.json 然后 url:"test.json" 即可。
    0 回复
  • jianfeng
    2017-12-29
    我这样写的:

    table.render({
    elem: '#test'
    ,url: 'user.json'
    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
    ,cols: [[
    {field:'id', width:80, title: 'ID', sort: true}
    ,{field:'username', width:80, title: '用户名'}
    ,{field:'sex', width:80, title: '性别', sort: true}
    ,{field:'city', width:80, title: '城市'}
    ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
    ,{field:'experience', title: '积分', sort: true}
    ,{field:'score', title: '评分', sort: true}
    ,{field:'classify', title: '职业'}
    ,{field:'wealth', width:137, title: '财富', sort: true}
    ]]
    });

    其中user.json放在html文件所在的同一个目录中,但是页面还是显示“数据接口请求异常”。
    0 回复
本帖已设置禁止回复