无法在javascript脚本标签中输出实际的json数据


Unable to output actual json data inside javascript script tag

我试图动态地使用ajax和php在javascript标签内输出实际的json数据,但这不再工作,同时json数据正在按需获得。实际上,当我使用console.log(response)测试从php脚本返回的结果json数据时,它在firebug控制台打印正确的数据。我也使用过JSON.parse(response),也尝试过JSON.stringify(response),但没有任何工作,如果我们使用stackevents: response分配数据,则不会在javascript脚本标签中输出(打印),当我看到页面源代码时,它只显示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

谢谢。

如果您必须调用。php来获取json数据,并且您想将其写入页面的脚本标记,这里有一个示例:https://codepen.io/mix3d/pen/qQNZWQ我不介绍使用PHP在呈现页面时将json数据插入html。

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

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。解析脚本内容以从中获得任何有用的数据!