getJSON不获取数据
getJSON not fetching data
我下面的代码不是从data.js获取数据当JSON数据硬编码到页面中时,页面工作正常。
<head>
<title>Test Page</title>
<script>
function jsontest() {
var text;
$.getJSON("data.js", function(result) {
text = result;
});
var obj = JSON.parse(text);
document.getElementById("content").innerHTML =
obj.name + "<br>" +
obj.street + "<br>" +
obj.phone;
}
</script>
</head>
<body onload="jsontest();">
<h1>Testing Page</h1>
<p id="content"></p>
</body>
我的数据是这样的
{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}
我犯了一个简单的错误吗?
我注意到的第一件事是您在同步模式下使用getJSON
。这不起作用,因为它是异步执行的。您需要将逻辑放在finish处理程序
function jsontest() {
var text;
$.getJSON("data.js", function(result) {
text = result;
var obj = JSON.parse(text);
document.getElementById("content").innerHTML =
obj.name + "<br>" +
obj.street + "<br>" +
obj.phone;
});
}
在你的代码中,当你执行
时var obj = JSON.parse(text);
方法getJSon
尚未返回,因此text
包含默认值。它将请求发送到服务器并在不等待结果的情况下继续方法流。
这就是处理程序的作用:在请求完成时放置需要执行的逻辑。
$.getJSON
是一个异步调用-所以当您尝试在回调之外运行JSON.parse
时,它将不起作用,因为调用仍在进行中。将代码移到回调中,就可以了:
function jsontest() {
$.getJSON("data.js", function(result) {
var text = result;
var obj = JSON.parse(text);
document.getElementById("content").innerHTML =
obj.name + "<br>" +
obj.street + "<br>" +
obj.phone;
});
//Anything after the `getJSON` call is executed immediately.
//$.getJSON is still in progress when these lines are executing
}
Javascript是单线程和非阻塞的,因此,当ajax调用正在执行时,程序计数器将继续。因此将解析一些未定义的内容。
如果你把代码放在ajax回调的下面,它会工作得很好。
你必须把你的代码放在回调中,否则你不会有文本变量填充:
function jsontest() {
var text;
$.getJSON("data.js", function(result) {
text = result;
var obj = JSON.parse(text);
document.getElementById("content").innerHTML =
obj.name + "<br>" +
obj.street + "<br>" +
obj.phone;
});
}
相关文章:
- 使用jquery将mysql数据获取到新的表行中
- 使用createContainer将Meteor数据获取到React Native中时出现问题
- 创建按钮,根据表单字段中的数据获取特定的URL
- 将JSON API数据获取到html
- 将json数据获取到数组中
- 如何将具有多个标签的多个的所有数据获取到一个数组中
- 将状态的 URL 数据获取到模板中
- 如何在jquery中将xml解析数据获取为全局变量
- 在没有JQuery的情况下将JSON数据获取到TVML项目中
- Angular js如何将索引数据获取到另一个模板中
- 如何将PHP Post数据获取到jquery ajax请求中
- 使用javascript中.data()中存储的数据获取变量
- 无法将动态数据获取到 Jquery 饼图中
- 将节点.js neDB 数据获取到变量中
- 更新页面 JSON 数据获取下拉更改
- 将数据绑定到 kendo 下拉列表时,如何将 ajax 响应数据获取到变量
- 画布图像数据获取的值不超过 102,000 个
- 如何通过 JQuery JSON 数据获取 CheckBox(@Html.CheckBox) 的值
- 从html到jquery再到php,再从php到jquery到html,将数据传递到php文件并将数据获取到php文件中
- 如何将Jquery.get中的数据获取到Javascript中的一个变量中