为什么会找不到sever文件?
来源:2-10 渲染数据
soso_crazy
2019-05-09 15:53:27
<!DOCTYPE html>
<html lang="en">
<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>ajax study</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="banner" id="banner"></div>
<script type="text/javascript">
// 第一步:创建XMLHttpRequest对象
//兼容各浏览器的XMLHttpRequest对象
function createXHR() {
if (typeof XMLHttpRequest != 'undefined') {
return new XMLHttpRequest();
} else if (typeof ActiveXObject) {
var XHRArr = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
for (var i = 0; i < XHRArr.length; i++) {
try {
XHR = new ActiveXObject(XHRArr[i]);
break;
} catch (error) {
}
}
return XHR;
} else {
throw new Error("No XHR object available.");
}
}
// 调用创建XMLHttpRequest对象
var XHR = createXHR(),
data = null; //用于保存接收服务器返回来的数据
XHR.onreadystatechange = function() {
if (XHR.readyState === 4) { //readyState===4表示响应内容解析完成,可以在客户端调用
if ((XHR.status >= 200 && XHR.status < 300) || XHR.status === 304) {
//status>=200&&status<300代表异步调用成功 status===304代表之前请求成功过,请求的资源距离上次请求没有发生过改变,可以使用缓存
data = JSON.parse(XHR.responseText); //将服务器返回来的JSON数据转换成字符串
// 请求成功后做的事情:
renderDataToDom();
} else {
console.log('unsuccess');
}
}
};
// 发送请求:
// send(string)
// method:使用get的方法,所有的参数拼在url上,使用send时括号的参数可以不填写,也可以填写null
// method:使用post的方法,send的括号一定要填写参数
//第二步:创建请求
XHR.open('get', './server/slider.json', false);
// 如果使用post请求,需要设置头部信息
// XHR.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //设置头部信息 告诉服务器要发送一个表单
// 第三步:发送请求
XHR.send(null);
// 请求成功后做的事情:加载html结构
function renderDataToDom() {
var img = data.slider,
i, len = img.length,
str = "",
banner = document.getElementById("banner");
for (var i = 0; i < len; i++) {
str += '<a href="' + img[i].linkUrl + '"><img src="' + img[i].picUrl + '"></a>';
}
banner.innerHTML = str;
}
</script>
</body>
</html>
*{
margin:0;
padding:0;
}
.banner{
width:600px;
height:338px;
overflow:hidden;
position:relative;
margin:50px auto;
}
.banner a{
display:block;
width:600px;
height:338px;
float:left;
}
.banner a img{
width:600px;
height:338px;
}
是我的send()中的地址有错吗?应该如何修改?
2回答
好帮手慕糖
2019-05-09
同学你好,是粘贴你的目录结构图哦。json与图片的目录。
祝学习愉快!
好帮手慕慕子
2019-05-09
同学你好,send()中的地址没有错, 看你截图的报错信息是没有找到图片哦
建议: 同学检查一下图片的路径写的是否正确。
如果还有问题, 建议同学将你的json文件和图片文件目录也粘贴过来,便于准确的定位和解决问题
如果帮助到了你, 欢迎采纳!
祝学习愉快~~~
相似问题
回答 1
回答 3