这里为啥报错了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="banner" id="banner"></div>
<div class="banner" id="banner_jq"></div>
<script src="js/jQ.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//封装通用的xhr对象,兼容各个版本
function createXHR() {
// 判断浏览器是否将XMLHttpRequest作为本地对象实现
// 针对firefox/等等
if (typeof XMLHttpRequest != "undefined") {
//如果存在则返回这个对象
return new XMLHttpRequest()
} else if (typeof ActiveXObject != "undefined") {
//将所有可能出现的ActiveXobject放在一个数组中
var xhrArr = ['Microsoft.XMLHTTP',
'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP.2.0'
]
//遍历创建XMLHttpRequest对象
var len = xhrArr.length
for (var i = 0; i < len; i++) {
try {
// 创建对象
xhr = new ActiveXObject(xhrArr[i])
// 尝试从符合的版本号中创建xmlrequest对象
break;
} catch (ex) {
}
}
return xhr
} else {
//如果都不支持
throw new Error("草泥马的傻逼东西")
}
}
// XMLHttpRequest对象
var xhr = createXHR(),
data = null
// 响应XMLHttpRequest对象状态变化的函数,在readystatechange变化时执行
xhr.onreadystatechange = function() {
//当异步调用成功时,可以在客户端调用
if (xhr.readyState === 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
//当调用成功时可以获取服务器返回的数据
data = JSON.parse(xhr.responseText)
//第四步渲染数据到页面上
renderDateToDom()
}
}
}
// 创建请求
xhr.open("GET", "server/test.json", true)
//发送请求
xhr.send()
//渲染数据
function renderDateToDom() {
var img = data.slider,
//获取了所有的图片和链接地址
i, len = img.length,
//获取其长度,并遍历
banner = document.getElementById("banner"),
str = ""
for (i = 0; i < len; i++) {
console.log(img[i])
// 创建a的dom节点
// var a=document.createElement("a")
// a.href=img[i].linkUrl
// a.innerHTML="<img src='"+img[i].picUrl+"'>"
// banner.appendChild(a)
str += '<a href="' + img[i].linkUrl + '">' + '<img src="' + img[i].picUrl + '">' + '</a>'
}
banner.innerHTML = str
}
//jq的$.ajax()
$.ajax({
url:"server/test.json",// 请求地址
type:"post", // 请求方式
async:true, // 同步异步
dataType:"json", // 数据格式
success:function(imgdata){ // 请求成功的数据
console.log(imgdata);
}
})
</script>
</body>
</html>
正在回答
同学你好，因为本地直接打开是无法加载json文件的，所以需要借助服务器打开页面，在浏览器中以localhost访问就可以正常加载json文件了。
同学启动服务器之后，不会出现报错，那就说明代码是没有问题，以后遇到需要加载json文件的，都从服务器打开页面就可以了
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星