为什么会找不到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()中的地址有错吗?应该如何修改?

http://img.mukewang.com/climg/5cd3dc6b0001c9d209980168.jpg

http://img.mukewang.com/climg/5cd3dc6c0001ee8706570132.jpg

http://img.mukewang.com/climg/5cd3dc6c00018bcd19030984.jpg


写回答

2回答

好帮手慕糖

2019-05-09

同学你好,是粘贴你的目录结构图哦。json与图片的目录。

祝学习愉快!

0
hoso_crazy
h 原来是我忘记复制img的图片放在文件夹中,已解决
h019-05-09
共1条回复

好帮手慕慕子

2019-05-09

同学你好,send()中的地址没有错, 看你截图的报错信息是没有找到图片哦

建议: 同学检查一下图片的路径写的是否正确。

http://img.mukewang.com/climg/5cd3ffd9000111ed08680158.jpg

如果还有问题, 建议同学将你的json文件和图片文件目录也粘贴过来,便于准确的定位和解决问题

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

0
hoso_crazy
h { "code": 0, "slider": [ { "linkUrl": "https://m.imooc.com/act/share", "picUrl": "img/fm1.jpg" }, { "linkUrl": "https://m.imooc.com/act/share", "picUrl": "img/fm2.jpg" }, { "linkUrl": "https://m.imooc.com/act/share", "picUrl": "img/fm3.jpg" }, { "linkUrl": "https://m.imooc.com/act/share", "picUrl": "img/fm4.jpg" }, { "linkUrl": "https://m.imooc.com/act/share", "picUrl": "img/fm5.jpg" }, { "linkUrl": "https://m.imooc.com/act/share", "picUrl": "img/fm6.jpg" } ] } 文件目录:http://localhost/ajaxstudy/study.html
h019-05-09
共1条回复

0 学习 · 14456 问题

查看课程