Javascript 如何在html页面中读取json文件？_Javascript_Html_Json_Ajax

Javascript 如何在html页面中读取json文件？

javascript html json ajax

Javascript 如何在html页面中读取json文件？,javascript,html,json,ajax,Javascript,Html,Json,Ajax,伙计们我想从json文件中读取，我创建json文件并使用ajax从中读取。我创建包含课程对象（标题和URL）的视频对象 . 我尝试读取HTML的标题和url作为示例，但HTML页面中没有显示任何数据 { "video": { "HTML": [ { "title": "HTML Intro", "URL": "http://www.youtube.com/embed/dD2EISBDjWM" }, {

伙计们

我想从json文件中读取，我创建json文件并使用ajax从中读取。我创建包含课程对象（标题和URL）的视频对象 . 我尝试读取HTML的标题和url作为示例，但HTML页面中没有显示任何数据

   {
  "video": {
    "HTML": [
      {
        "title": "HTML Intro",
        "URL": "http://www.youtube.com/embed/dD2EISBDjWM"
      },
      {
        "title": "Lists",
        "URL": "http://www.youtube.com/embed/09oErCBjVns"
      },
      {
        "title": "Tables",
        "URL": "http://www.youtube.com/embed/wvR40su_XBM"
      },
      {
        "title": "Links",
        "URL": "http://www.youtube.com/embed/U4UHoiK6Oo4"
      },

      {
        "title": "Images",
        "URL": "http://www.youtube.com/embed/Zy4KJeVN7Gk"
      }
    ],
    "CSS": [
      {
        "title": "Applying Styles",
        "URL": "http://www.youtube.com/embed/Wz2klMXDqF4"
      },
      {
        "title": "Selectors",
        "URL": "http://www.youtube.com/embed/6rKan6loNTw"
      },
      {
        "title": "Box Model",
        "URL": "http://www.youtube.com/embed/NR4arpSA2jI"
      },
      {
        "title": "Positioning",
        "URL": "http://www.youtube.com/embed/W5ycN9jBuBw"
      }
    ],
    "JavaScript": [
      {
        "title": "Introduction to JavaScript",
        "URL": "http://www.youtube.com/embed/yQaAGmHNn9s"
      },
      {
        "title": "Comments and Statements",
        "URL": "http://www.youtube.com/embed/yUyJ1gcaraM"
      },
      {
        "title": "Variables",
        "URL": "http://www.youtube.com/embed/og4Zku5VVl0"
      },
      {
        "title": "Functions",
        "URL": "http://www.youtube.com/embed/5nuqALOHN1M"
      },
      {
        "title": "Conditions",
        "URL": "http://www.youtube.com/embed/5gjr15aWp24"
      },
      {
        "title": "Objects",
        "URL": "http://www.youtube.com/embed/mgwiCUpuCxA"
      },
      {
        "title": "Arrays",
        "URL": "http://www.youtube.com/embed/nEvBcwlpkBQ"
      }
    ],
    "Jquery": [
      {
        "title": "Introduction",
        "URL": "http://www.youtube.com/embed/hMxGhHNOkCU"
      },
      {
        "title": "Event Binding",
        "URL": "http://www.youtube.com/embed/G-POtu9J-m4"
      },
      {
        "title": "DOM Accessing",
        "URL": "http://www.youtube.com/embed/LYKRkHSLE2E"
      },
      {
        "title": "Image Slider",
        "URL": "http://www.youtube.com/embed/KkzVFB3Ba_o"
      }
    ]
  }
}

我使用ajax阅读，我需要阅读所有HTML标题和URL。这有什么问题

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div id="id01"></div>
<script>
var xhr;
  if (window.XMLHttpRequest)
  {
    xhr = new XMLHttpRequest();
  }
  else
  {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhr.open('GET', 'video.json');
  xhr.onreadystatechange = function ()
  {
    if ((xhr.readyState === 4) && (xhr.status === 200)) {
        var arr = JSON.parse(xhr.responseText);
        var out = "<table>";
        for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" +
        video[HTML][i].title +
        "</td><td>" +
       video[HTML][i].URL +
        "</td></tr>";
      }
    out += "</table>";
    document.getElementById("id01").innerHTML = out;
    }
  }
  xhr.send();
    </script>
</body>
</html>


var-xhr；
if（window.XMLHttpRequest）
{
xhr=newXMLHttpRequest（）；
}
其他的
{
xhr=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
open（'GET'，'video.json'）；
xhr.onreadystatechange=函数（）
{
如果（（xhr.readyState==4）和&（xhr.status==200））{
var arr=JSON.parse（xhr.responseText）；
var out=“”；
对于（i=0；i

这个
video[HTML][i].title

应该是
video.html[i].title 

尝试替换video[“HTML”][i]。title
其中“HTML”
是video[HTML][i]中HTML
的字符串。title
，而且arr
不是数组，而是对象
var out = "<table>";

for (var i = 0; i < json.video["HTML"].length; i++) {
  out += "<tr><td>" +
    json.video["HTML"][i].title +
    "</td><td>" +
    json.video["HTML"][i].URL +
    "</td></tr>";
}

out += "</table>";
document.getElementById("id01").innerHTML = out;

var out=”“；
for（var i=0；i


var json={
“视频”：{
“HTML”：[{
“标题”：“HTML简介”，
“URL”：”http://www.youtube.com/embed/dD2EISBDjWM"
}, {
“标题”：“列表”，
“URL”：”http://www.youtube.com/embed/09oErCBjVns"
}, {
“标题”：“表格”，
“URL”：”http://www.youtube.com/embed/wvR40su_XBM"
}, {
“标题”：“链接”，
“URL”：”http://www.youtube.com/embed/U4UHoiK6Oo4"
},
{
“标题”：“图像”，
“URL”：”http://www.youtube.com/embed/Zy4KJeVN7Gk"
}
],
“CSS”：[{
“标题”：“应用样式”，
“URL”：”http://www.youtube.com/embed/Wz2klMXDqF4"
}, {
“标题”：“选择器”，
“URL”：”http://www.youtube.com/embed/6rKan6loNTw"
}, {
“标题”：“盒子模型”，
“URL”：”http://www.youtube.com/embed/NR4arpSA2jI"
}, {
“标题”：“定位”，
“URL”：”http://www.youtube.com/embed/W5ycN9jBuBw"
}],
“JavaScript”：[{
“标题”：“JavaScript简介”，
“URL”：”http://www.youtube.com/embed/yQaAGmHNn9s"
}, {
“标题”：“评论和声明”，
“URL”：”http://www.youtube.com/embed/yUyJ1gcaraM"
}, {
“标题”：“变量”，
“URL”：”http://www.youtube.com/embed/og4Zku5VVl0"
}, {
“标题”：“功能”，
“URL”：”http://www.youtube.com/embed/5nuqALOHN1M"
}, {
“标题”：“条件”，
“URL”：”http://www.youtube.com/embed/5gjr15aWp24"
}, {
“标题”：“对象”，
“URL”：”http://www.youtube.com/embed/mgwiCUpuCxA"
}, {
“标题”：“数组”，
“URL”：”http://www.youtube.com/embed/nEvBcwlpkBQ"
}],
“Jquery”：[{
“标题”：“引言”，
“URL”：”http://www.youtube.com/embed/hMxGhHNOkCU"
}, {
“标题”：“事件绑定”，
“URL”：”http://www.youtube.com/embed/G-POtu9J-m4"
}, {
“标题”：“DOM访问”，
“URL”：”http://www.youtube.com/embed/LYKRkHSLE2E"
}, {
“标题”：“图像滑块”，
“URL”：”http://www.youtube.com/embed/KkzVFB3Ba_o"
}]
}
};
var out=“”；
for（var i=0；idocument.body.innerHTML=out哪里定义了HTML
？尝试替换video[“HTML”][i]。title
其中“HTML”
是video[HTML][i中HTML
的字符串。title
@guest271314什么？HTML
未定义。另外，arr
不是一个数组，而是一个对象。问题不止于此