iam 在 wamp 服务器上测试 ajax，但它说 send() 是一个匿名函数，并且 iam 得到空白文档。
控制台正在记录:
XHR 完成加载: GET "http://localhost/json/main.json ".(匿名函数) @ widget.js:21(即 xhr.send();)
我的html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax</title>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div id="employees">
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/widget.js"></script>
<script type="text/javascript" src="json/main.JSON"></script>
</body>
</html>
json 对象:
[
{
"name": "Joe Consterdine",
"workstatus": true
},
{
"name": "Roberto Baggio",
"workstatus": true
},
{
"name": "Michael Smith",
"workstatus": false
},
{
"name": "Darren Huckerby",
"workstatus": true
},
{
"name": "Dean Blackwell",
"workstatus": false
},
{
"name": "Neil Sullivan",
"workstatus": false
},
{
"name": "Mark Fish",
"workstatus": true
},
{
"name": "Dean Holdsworth",
"workstatus": true
}
]
我的js代码:
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.onreadystate === 4){
var employees = JSON.parse(xhr.responseText);
var statusHTML = '<ul class="bulleted">';
for(var i = 0; i<employees.length; i++ ){
if(employees[i].workstatus === true){
statusHTML += '<li class="in">';
}else{
statusHTML += '<li class="out">';
}
statusHTML += employees[i].name + '</li>';
}
statusHTML += '</ul>';
document.getElementById('employees').innerHTML = statusHTML;
}
}
xhr.open('GET', 'json/main.json');
xhr.send();
最佳答案
这不是你所拥有的if(xhr.readyState ==4)
您还应该检查 onreadystatechange 中的 xhr.status
所以，你的代码将是
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var employees = JSON.parse(xhr.responseText);
var statusHTML = '<ul class="bulleted">';
for (var i = 0; i < employees.length; i++) {
if (employees[i].workstatus === true) {
statusHTML += '<li class="in">';
} else {
statusHTML += '<li class="out">';
}
statusHTML += employees[i].name + '</li>';
}
statusHTML += '</ul>';
document.getElementById('employees').innerHTML = statusHTML;
}
};
xhr.open('GET', 'json/main.json');
xhr.send();
我更喜欢使用 onload/onerror
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var employees = JSON.parse(xhr.responseText);
var statusHTML = '<ul class="bulleted">';
for (var i = 0; i < employees.length; i++) {
if (employees[i].workstatus === true) {
statusHTML += '<li class="in">';
} else {
statusHTML += '<li class="out">';
}
statusHTML += employees[i].name + '</li>';
}
statusHTML += '</ul>';
document.getElementById('employees').innerHTML = statusHTML;
};
xhr.onerror = function(e) {
console.log(e);
};
xhr.open('GET', 'json/main.json');
xhr.send();
但是 onload/onerror 可能在旧的损坏的浏览器(即 IE)中不可用
关于javascript - send() 是匿名函数吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33771190/