Question

我正在尝试从我的.json文件（从服务器）获取数据，并将其显示在页面上。很抱歉，我的JS语法不太好。

我试图仅显示文件中的一个参数，但屏幕上看不到任何东西。

<html>
<head>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
</script>

<script>

$(function() {



$.getJSON("video.json", function(data)) {
   $.each(data.NewsSources, function(i, f) {
      var vid =  f.Name;
       $(vid).appendTo("#userdata");
 });

});

});
</script>
</head>

<body>


<div id= "userdata">
<h1>This is a name</h1>
</div>


</body>
</html>

video.json

{
"NewsSources": [
{
  "ID": 2004,
  "Name": "365TV Brasil",
  "Description": "",
  "URL": "https://www.instagram.com/365scoresbra",
  "Lang": 31,
  "CountryID": 21,
  "LogoUrl": "",
  "ImgVer": 0
 }
 ]
 }

Answer 1

您有一个小错误，应该使用$(vid).appendTo("#userdata")而不是$("#userdata").append(vid)。

data = {
    "NewsSources": [{
        "ID": 2004,
        "Name": "365TV Brasil",
        "Description": "",
        "URL": "https://www.instagram.com/365scoresbra",
        "Lang": 31,
        "CountryID": 21,
        "LogoUrl": "",
        "ImgVer": 0
    }]
};
$.each(data.NewsSources, function(i, f) {
    var vid = f.Name;
    $("#userdata").append(vid);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="userdata">
    <h1>This is a name</h1>
</div>

也在JSFiddle上。

为什么...好吧，做$("365TV Brasil")是一个jQuery选择器，它不会在您的页面上选择任何内容。另一方面，在jQuery may be complicated中创建文本节点。因此，更好的方法是使用jQuery append method，它允许文本作为参数：

DOM元素，文本节点，元素和文本节点的数组，HTML字符串，或jQuery对象插入到集合中每个元素的末尾匹配的元素。

Answer 2

是的，谢谢，此代码有效。我也有两个small而不是一个小错误。在这条线 $.each(data.NewsSources, function(i, f)

<html>
<head>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
</script>

<script>

$(function() {



$.getJSON('https://ws.365scores.com/Data/news/?newsitems=101640575', function(data) {
$.each(data.NewsSources, function(i, f) {
  var vid=f.Name;
   $("#userdata").append(vid);
});

});

});
</script>
</head>

 <body>


<div id= "userdata">
<h1>This is a name</h1>
</div>


</body> 
 </html>

如何使用jquery库显示.json文件中的内容？

2 个答案: