javascript - 无法在 javascript 脚本标记内输出实际的 json 数据

Question

我尝试使用ajax和php动态地在javascript标签内输出实际的json数据，但这不再起作用，同时json数据正在按需要获取。实际上，当我使用 console.log(response) 测试从 php 脚本返回的结果 json 数据时，它会在 firebug 控制台中打印正确的数据。我还使用过 JSON.parse(response) 并尝试过 JSON.stringify(response) 但没有任何效果，并且如果我们分配，则不会在 javascript 脚本标记中输出(打印)使用stackevents:response的数据，当我看到页面源代码时，它仅显示stackevents:response，但不显示如下所示的实际输出

stackevents:[{"date":"2013-08-24","type":"arrowDown","graph":"g1","backgroundColor":"#85CDE6","value":"417","description":"This is description of an event"},{"date":"2013-08-25","type":"pin","graph":"g1","backgroundColor":"#85CDE6","value":"417","description":"This is description of an event"},{"date":"2013-08-26","type":"sign","graph":"g1","backgroundColor":"#85CDE6","value":"531","description":"This is description of an event"},{"date":"2013-08-27","type":"arrowUp","graph":"g1","backgroundColor":"#00CC00","value":"333","description":"This is description of an event"},{"date":"2013-08-28","type":"pin","graph":"g1","backgroundColor":"#FFFFFF","value":"552","description":"This is description of an event"},{"date":"2013-08-29","type":"arrowUp","graph":"g1","backgroundColor":"#85CDE6","value":"492","description":"This is description of an event"},{"date":"2013-08-30","type":"pin","graph":"g1","backgroundColor":"#FFFFFF","value":"379","description":"This is description of an event"},{"date":"2013-08-31","type":"pin","graph":"g1","backgroundColor":"#85CDE6","value":"767","description":"This is description of an event"},{"date":"2013-09-01","type":"flag","graph":"g1","backgroundColor":"#85CDE6","value":"169","description":"This is description of an event"},{"date":"2013-09-02","type":"arrowUp","graph":"g1","backgroundColor":"#85CDE6","value":"314","description":"This is description of an event"},{"date":"2013-09-03","type":"arrowDown","graph":"g1","backgroundColor":"#85CDE6","value":"437","description":"This is description of an event"}]

为了获得更多说明，我想要这样

stackevents:[{"date":"2013-08-24","type":"arrowDown","graph":"g1","backgroundColor":"#85CDE6","value":"417","description":"This is description of an event"},{"date":"2013-08-25","type":"pin","graph":"g1","backgroundColor":"#85CDE6","value":"417","description":"This is description of an event"},{"date":"2013-08-26","type":"sign","graph":"g1","backgroundColor":"#85CDE6","value":"531","description":"This is description of an event"},{"date":"2013-08-27","type":"arrowUp","graph":"g1","backgroundColor":"#00CC00","value":"333","description":"This is description of an event"},{"date":"2013-08-28","type":"pin","graph":"g1","backgroundColor":"#FFFFFF","value":"552","description":"This is description of an event"},{"date":"2013-08-29","type":"arrowUp","graph":"g1","backgroundColor":"#85CDE6","value":"492","description":"This is description of an event"},{"date":"2013-08-30","type":"pin","graph":"g1","backgroundColor":"#FFFFFF","value":"379","description":"This is description of an event"},{"date":"2013-08-31","type":"pin","graph":"g1","backgroundColor":"#85CDE6","value":"767","description":"This is description of an event"},{"date":"2013-09-01","type":"flag","graph":"g1","backgroundColor":"#85CDE6","value":"169","description":"This is description of an event"},{"date":"2013-09-02","type":"arrowUp","graph":"g1","backgroundColor":"#85CDE6","value":"314","description":"This is description of an event"},{"date":"2013-09-03","type":"arrowDown","graph":"g1","backgroundColor":"#85CDE6","value":"437","description":"This is description of an event"}] 

使用 javascript、jquery、ajax 和 php 代替 stackevents: response。

谢谢。

Answer 1

如果您必须调用 .php 来获取 json 数据，并且希望将其写入页面的 script 标签，这里有一个示例:https://codepen.io/mix3d/pen/qQNZWQ我不会介绍如何在页面渲染时使用 PHP 将 json 数据插入到 html 中。

只需包含 <script type="application/json" id="myscript"></script>在 html 的某处，然后使用以下代码，您可以接受 .php 文件中的 JSON 数据并使用 innerHTML 将其插入到脚本标记中。因为脚本标签只是另一个 DOM 元素，所以您可以使用 JS 访问它们，就像 div 一样。或button .

fetch('https://path-to.your/file.php')
  .then(response => response.json())
  .then(json => {
    console.log(json)
    document.getElementById('myscript').innerHTML = JSON.stringify(json,null,2);
})

JSON.stringify()的第二个和第三个参数是将 JSON 对象漂亮地打印到脚本标记中。如果你不先对对象进行字符串化，你将得到 [object Object]作为脚本标签的内容，因为 JS 会使用类型强制来获取对象的字符串。

如果上面的代码使用现代 JS 的 fetch 太多了，这里还有一个使用 jQuery 的例子:

$.getJSON( "https://path-to.your/file.php", function( json ) {
    document.getElementById('myscript').innerHTML = JSON.stringify(json,null,2);
})

此外，如果您想创建脚本标记以将 JSON 放入:

let jsonScript = document.createElement('script');
// if you don't set the type, the browser will try to execute the text as JS instead of JSON.
jsonScript.setAttribute('type', 'application/json');
jsonScript.textContent = JSON.stringify(json);
document.head.appendChild(jsonScript); // or document.body, your choice

您必须对脚本内容进行 JSON.parse 才能从中获取任何有用的数据!