我试图动态地使用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访问它们,就像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。解析脚本内容以从中获得任何有用的数据!