Javascript 为什么我不能在表中看到JSON数据?
我写这个问题是因为我有这个网站我需要做,我唯一的问题是JSON。 我有这个带有JSON的url,但当我尝试使用链接时,它会给我一个错误,你可以在我的问题中进一步看到,但是当从url获取所有数据时,我将其放入一个变量中,那么我将不会得到错误,我将看到我的数据,但这不是应该发生的事情 我的JSON有一个问题,我怎么在HTML页面上看不到我的数据,我也找不到这个问题 这里是我的HTML页面:Javascript 为什么我不能在表中看到JSON数据?,javascript,jquery,html,json,Javascript,Jquery,Html,Json,我写这个问题是因为我有这个网站我需要做,我唯一的问题是JSON。 我有这个带有JSON的url,但当我尝试使用链接时,它会给我一个错误,你可以在我的问题中进一步看到,但是当从url获取所有数据时,我将其放入一个变量中,那么我将不会得到错误,我将看到我的数据,但这不是应该发生的事情 我的JSON有一个问题,我怎么在HTML页面上看不到我的数据,我也找不到这个问题 这里是我的HTML页面: <script src="https://code.jquery.com/jquery-
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/jquery-3,2,1.js" type="text/javascript"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<table id="product_table" class="table table-responsive table-sm">
<thead>
<tr>
<th>Product</th>
<th>Photo</th>
<th>Sizes</th>
<th>Price</th>
<th>Old Price</th>
<th>Delivery</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="js/bootstrap.js"></script>
<script src="js/npm.js"></script>
</div>
</body>
</html>
这是我的控制台中的错误消息:
现在我的问题是,如果有问题,我该如何解决,或者我遗漏了什么,为了让它工作,我真的希望通过URL获取数据,如第一个脚本所示
(我在这个项目中只使用jQuery、Bootstrap和HTML。)
编辑
问题解决了,因为我在我的PC上本地做这个项目,所以我不得不启动一个本地服务器,我完全忘记了。
因此,如果其他任何人有一些问题,比如我一定要仔细检查项目是否有本地服务器运行您的脚本似乎很好。在排除过程中,
$.getJSON(“unisport.json”,函数(数据){…})肯定有问题代码>呼叫。您不能从服务器获取JSON响应,也不能获取预期格式的JSON
尝试console.log
接收到的JSON响应以确认其为预期格式,或者检查调试器以查看$.getJSON
是否引发错误。检查此项
var unisport=[{
“是否可自定义”:“0”,
“交付”:“1-2达格”,
“儿童”:“0”,
“名称”:“阿迪达斯Tr\u00e6ningsbukser Z.N.E.公路旅行-Gr\u00e5”,
“尺寸”:“XX大”,
“儿童/成人”:“0”,
“自由港”:“0”,
“图像”:https://d2ij1pxeion66i.cloudfront.net/product/157128/010c01d20cac.jpg",
“包”:“0”,
“价格”:“399,00”,
“url”:”https://www.unisport.dk/fodboldudstyr/adidas-trningsbukser-zne-road-trip-gra/157128/",
“在线”:“1”,
“价格旧”:“799,00”,
“货币”:“丹麦克朗”,
“img_url”:https://s3-eu-west-1.amazonaws.com/product-img/157128_maxi_0.jpg",
“id”:“157128”,
“女性”:“0”
},
{
“是否可自定义”:“0”,
“交付”:“1-2达格”,
“儿童”:“0”,
“名称”:“阿迪达斯Tr\u00e6ningsbukser Z.N.E.公路旅行-Gr\u00e5”,
“尺寸”:“XX大”,
“儿童/成人”:“0”,
“自由港”:“0”,
“图像”:https://d2ij1pxeion66i.cloudfront.net/product/157128/010c01d20cac.jpg",
“包”:“0”,
“价格”:“399,00”,
“url”:”https://www.unisport.dk/fodboldudstyr/adidas-trningsbukser-zne-road-trip-gra/157128/",
“在线”:“1”,
“价格旧”:“799,00”,
“货币”:“丹麦克朗”,
“img_url”:https://s3-eu-west-1.amazonaws.com/product-img/157128_maxi_0.jpg",
“id”:“157128”,
“女性”:“0”
},
{
“是否可自定义”:“0”,
“交付”:“1-2达格”,
“儿童”:“0”,
“名称”:“阿迪达斯Tr\u00e6ningsbukser Z.N.E.公路旅行-Gr\u00e5”,
“尺寸”:“XX大”,
“儿童/成人”:“0”,
“自由港”:“0”,
“图像”:https://d2ij1pxeion66i.cloudfront.net/product/157128/010c01d20cac.jpg",
“包”:“0”,
“价格”:“399,00”,
“url”:”https://www.unisport.dk/fodboldudstyr/adidas-trningsbukser-zne-road-trip-gra/157128/",
“在线”:“1”,
“价格旧”:“799,00”,
“货币”:“丹麦克朗”,
“img_url”:https://s3-eu-west-1.amazonaws.com/product-img/157128_maxi_0.jpg",
“id”:“157128”,
“女性”:“0”
}]
var乘积_数据=“”;
$.each(单端口、函数(键、值){
产品数据+='';
产品数据+=''+值。名称+'';
产品数据+='';
产品数据+=''+值.尺寸+'';
产品数据+=''+价值.价格+''+价值.货币+'';
产品数据+=''+价值.价格旧版+''+价值.货币+'';
产品数据+=''+价值。交付+'';
产品数据+='';
});
$(“#产品#表”)。追加(产品#数据)代码>
产品
照片
尺寸
价格
旧价
传送
请包括使用的JS代码。这里有我试用过的两个脚本
-再看一次,这里什么都没有-在你做任何事情之前,你检查过浏览器开发工具控制台的错误吗?(F12提出来)@JaromandaX sry关于它在我发完帖子之前就发布了,但是我忘记了在我的控制台中查找错误,但是我可以看到我得到了一个“XMLHttpRequest不能加载”错误,因此你的$.getJSON(“unisport.json”),有一个问题代码>呼叫。您没有得到JSON响应。代码的其余部分看起来不错,请确保json路径正确。您好。我曾尝试使用plunker,并以与您相同的方式使用它,尝试使用VAR来存储我的数据,从我的json文件中,我也尝试通过URL获取数据,但是,当我在PC上加载op侧时,它不会加载数据(我得到一个XmlHttpRequest cant load错误)但是,当我在plunker上执行操作时,我没有收到任何错误,我的数据会按照我的意愿放入表中,但是它如何在plunker上工作,而不是在我的pc上工作?可能会有帮助吗?嘿,谢谢你的帮助,我发现我忘了启动本地服务器。同样感谢这个站点,我不知道。您好,我在调试我的站点时没有收到任何错误,当我在控制台中查看时,我发现XMLHttpRequest无法加载错误,好像它可以“找到”数据/json,但我没有访问权限?问题已经解决,我忘记启动本地服务器:D
<!-- <script>
var productJSON = "https://www.unisport.dk/api/sample/";
$.getJSON(productJSON, function(data) {
$.each(data.products, function(i,f){
var tblRow ="<tr>" + "<td>" + f.name + "</td>" + "<td>" + "<img class='img-responsive' alt='photo of product' src='" + f.image + "'>" + "</td>" + "<td>" + f.sizes + "</td>" + "<td>" + f.price + " " + f.currency + "</td>" + "<td>" + "<s>" + f.price_old + " " + f.currency + "</s>" + "</td>" + "<td>" + f.delivery + "</td>" + "</tr>"
$(tblRow).appendTo("#products tbody");
});
});
</script> -->
<script>
$(document).ready(function(){
$.getJSON("unisport.json", function(data){
var product_data = '';
$.each(data, function(key, value){
product_data += '<tr>';
product_data += '<td>'+value.name+'</td>';
product_data += '<td><img scr="'+value.image+'"></td>';
product_data += '<td>'+value.sizes+'</td>';
product_data += '<td>'+value.price+' '+value.currency+'</td>';
product_data += '<td>'+value.price_old+' '+value.currency+'</td>';
product_data += '</tr>';
});
$('#product_table').append(product_data);
});
});
</script>
{"is_customizable": "0",
"delivery": "1-2 dage",
"kids": "0",
"name": "adidas Tr\u00e6ningsbukser Z.N.E. Road Trip - Gr\u00e5",
"sizes": "XX-Large",
"kid_adult": "0",
"free_porto": "0",
"image": "https://d2ij1pxeion66i.cloudfront.net/product/157128/010c01d20cac.jpg",
"package": "0",
"price": "399,00",
"url": "https://www.unisport.dk/fodboldudstyr/adidas-trningsbukser-zne-road-trip-gra/157128/",
"online": "1",
"price_old": "799,00",
"currency": "DKK",
"img_url": "https://s3-eu-west-1.amazonaws.com/product-img/157128_maxi_0.jpg",
"id": "157128",
"women": "0"},