无法在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访问它们,就像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。解析脚本内容以从中获得任何有用的数据!
- 如何将JSON数据导入我的ejs模板
- 如何将json数据显示为html
- Json数据包含日期和时间格式
- 用我的json数据填充JQuery DataTable
- AngularJS加载JSON数据,然后从中解析/加载HTML
- 使用jquery读取Json数据
- 如何将本地json数据加载到Extjs数据模型中
- 如何使用jquery ajax和jsonp在您自己的域上读取json数据
- React-将jSON数据传递给子组件的子组件
- 尝试从控制器加载带有json数据的Simile时间线
- Jquery:对返回JSON数据的php脚本的Ajax调用
- 如何通过数据分组将json数据转换为嵌套的json数据格式
- 如何在ReactJs中显示Json数据
- 使用javascript进行JSON数据检索
- tu如何将id放在填充了json数据的html表td上
- 将JSON数据从服务器加载到knockout.jsobservable中
- 使用JavaScript处理JSON数据
- 如何将json数据传递到.js文件
- 如何在带有nunjucks和gullow数据的JSON数据中使用带有HTML的内容
- 如何使用var名称调用JSON数据