Fatal编程技术网

Javascript 从url到HTML的JSON

javascript html json rest

Javascript 从url到HTML的JSON,javascript,html,json,rest,Javascript,Html,Json,Rest,我目前正在尝试学习RESTful API并将其实现到用例中，我正在尝试做的一件事是将带有json负载的url从一台服务器加载到一个单独的web服务器中，以便在表上显示数据。我不太熟悉这一点，所以我试图找到最好的方法来做到这一点 我正在使用此API发布到一个名为domain.com/todos的页面 然后我试图用它把它打印到一张表上 但它看起来不起作用。我把它全部放在一个索引文件中，它显示它在控制台上命中了我的api，但我没有在表中显示任何输出 <html> <table i

我目前正在尝试学习RESTful API并将其实现到用例中，我正在尝试做的一件事是将带有json负载的url从一台服务器加载到一个单独的web服务器中，以便在表上显示数据。我不太熟悉这一点，所以我试图找到最好的方法来做到这一点

我正在使用此API发布到一个名为domain.com/todos的页面

然后我试图用它把它打印到一张表上

但它看起来不起作用。我把它全部放在一个索引文件中，它显示它在控制台上命中了我的api，但我没有在表中显示任何输出

<html>
<table id="personDataTable">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>due</th>
    </tr>

</table>

<style>
table {
  border: 2px solid #666;
    width: 100%;
}
th {
  background: #f8f8f8;
  font-weight: bold;
    padding: 2px;
}
</style>
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>
$.ajax({
    url: 'http://my-website-domain.com/todos',
    type: "get",
    dataType: "json",

    success: function(data) {
        drawTable(data);
    }
});

function drawTable(data) {
    for (var i = 0; i < data.length; i++) {
        drawRow(data[i]);
    }
}

function drawRow(rowData) {
    var row = $("<tr />")
    $("#personDataTable").append(row);
        row.append($("<td>" + rowData.id + "</td>"));
        row.append($("<td>" + rowData.name + "</td>"));
        row.append($("<td>" + rowData.due + "</td>"));
    }

</script>
</html>
未向success函数传递原始数据。它传递了一个具有许多不同属性的对象。数据只是其中之一。试试这个：

$.ajax({
    url: 'http://my-website-domain.com/todos',
    type: "get",
    dataType: "json",

    success: function(results) {
        drawTable(results.data);
    }
});
也有可能我记错了。我会在success函数中放入一个
调试器
，看看它实际上传递了什么，然后从那里开始。
问题是页面/todos返回的JSON不是有效的JSON数组。错过


]


最后

因此，这将是：


[{"id":1,"name":"Write presentation","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":2,"name":"Host meetup","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":3,"name":"New Todo","completed":false,"due":"0001-01-01T00:00:00Z"}]


以下是验证JSON数据的页面：

谢谢大家的帮助。问题是CORS策略未启用，因此请求被阻止。修复方法是简单地启用CORS，这是在处理程序中完成的


w.Header().Set("Access-Control-Allow-Origin", "*")



我想你应该检查API获取json数据，我复制你的代码和哈希代码json数据，看看它是否工作



/$.ajax({
//网址：'http://my-website-domain.com/todos',
//键入：“获取”，
//数据类型：“json”，
//
//成功：功能（数据）{
//图纸（数据）；
//    }
//});
var数据=[{“id”：1，“名称”：“编写演示文稿”，“完成”：false，“到期”：“0001-01-01T00:00:00Z”}，{“id”：2，“名称”：“主持会议”，“完成”：false，“到期”：“0001-01-01T00:00:00Z”}，{“id”：3，“名称”：“新待办事项”，“完成”：false，“到期”：“0001-01-01T00:00:00Z”}；
图纸（数据）；
函数绘图表（数据）{
对于（变量i=0；i



身份证件
名称
由于
桌子{
边框：2个实心#666；
宽度：100%；
}
th{
背景：#f8f8；
字体大小：粗体；
填充：2px；
}

要制作json数据表，可以使用jQuery DataTables

以下是示例代码：



$（文档）.ready（函数（）{
$（'#示例'）。数据表（{
“ajax”：http://www.json-generator.com/api/json/get/cjnIrxkIUi?indent=2'
} );
} );


名称
位置
办公室
Extn。
开始日期
薪水
名称
位置
办公室
Extn。
开始日期
薪水

您能分享您在
数据中收到的信息吗<例如，在
drawTable
函数中使用code>console.log（data）
，并提供一个输出。看起来您的todos JSON缺少一个右方括号。控制台中是否抛出任何错误？您的完整代码是正确的。可能问题在于获取数据，就像上面显示的响应不是直接在数据对象中。因此，一旦共享或检查来自ajax调用的数据。您确定
data
of
success:function（data）
是json对象吗？qiAlex的响应帮助我解决了这个问题。CORS未启用，因此json被阻止。已启用，现在可以工作了

w.Header().Set("Access-Control-Allow-Origin", "*")