- 技术博客
- 使用JS实现无刷新读取json接口数据
使用JS实现无刷新读取json接口数据
Ajax方法
function ajax(method
, url
, asy
, fn
) {
if (window
.XMLHttpRequest
) {
var objAjax
= new XMLHttpRequest();
} else {
var objAjax
= new ActiveXObject("Microsoft.XMLHTTP");
}
objAjax
.open(method
, url
, asy
);
objAjax
.send();
objAjax
.onreadystatechange = function() {
if (objAjax
.readyState
== 4 && objAjax
.status
== 200) {
fn(objAjax
.responseText
);
}
}
}
json数据接口
{
"reason": "success",
"result": [
{
"movieId": "21250",
"movieName": "白日梦想家",
"pic_url": "http://img31.mtime.cn/mt/2013/11/26/074429.68199128_96X128.jpg"
},
{
"movieId": "134509",
"movieName": "最强囍事",
"pic_url": "http://img21.mtime.cn/mt/2011/01/13/122711.93922385_96X128.jpg"
},
{
"movieId": "143038",
"movieName": "天才眼镜狗",
"pic_url": "http://img31.mtime.cn/mt/2014/03/06/090305.77794647_96X128.jpg"
},
{
"movieId": "151951",
"movieName": "美国队长2",
"pic_url": "http://img31.mtime.cn/mt/2014/03/16/154554.36400206_96X128.jpg"
},
{
"movieId": "172743",
"movieName": "魔警",
"pic_url": "http://img31.mtime.cn/mt/2014/04/09/085413.72005937_96X128.jpg"
},
{
"movieId": "177879",
"movieName": "里约大冒险2",
"pic_url": "http://img31.mtime.cn/mt/2014/03/20/091804.71943568_96X128.jpg"
},
{
"movieId": "178498",
"movieName": "整容日记",
"pic_url": "http://img31.mtime.cn/mt/2014/04/04/185750.94280401_96X128.jpg"
},
{
"movieId": "180842",
"movieName": "201314",
"pic_url": "http://img31.mtime.cn/mt/2012/12/20/134302.99793240_96X128.jpg"
},
{
"movieId": "181203",
"movieName": "盟军夺宝队",
"pic_url": "http://img31.mtime.cn/mt/2014/03/06/112340.71755460_96X128.jpg"
},
{
"movieId": "190465",
"movieName": "超验骇客",
"pic_url": "http://img31.mtime.cn/mt/2014/03/07/165346.19559684_96X128.jpg"
},
{
"movieId": "190494",
"movieName": "再爱一次好不好",
"pic_url": "http://img31.mtime.cn/mt/2014/03/24/161434.19041972_96X128.jpg"
},
{
"movieId": "195986",
"movieName": "狂舞派",
"pic_url": "http://img31.mtime.cn/mt/2013/08/08/172715.27242932_96X128.jpg"
},
{
"movieId": "200310",
"movieName": "大力神",
"pic_url": "http://img31.mtime.cn/mt/2014/04/02/121553.40570610_96X128.jpg"
},
{
"movieId": "203734",
"movieName": "追爱大布局",
"pic_url": "http://img31.mtime.cn/mt/2014/04/08/112633.32015390_96X128.jpg"
},
{
"movieId": "205228",
"movieName": "百变爱人",
"pic_url": "http://img31.mtime.cn/mt/2014/03/18/142633.24585044_96X128.jpg"
},
{
"movieId": "207415",
"movieName": "特工艾米拉",
"pic_url": "http://img31.mtime.cn/mt/2014/04/01/112811.60380935_96X128.jpg"
},
{
"movieId": "209201",
"movieName": "硬汉奶爸",
"pic_url": "http://img31.mtime.cn/mt/2014/04/08/105211.53977334_96X128.jpg"
},
{
"movieId": "209208",
"movieName": "笔仙惊魂3",
"pic_url": "http://img31.mtime.cn/mt/2014/04/01/111740.74687087_96X128.jpg"
},
{
"movieId": "209220",
"movieName": "最佳嫌疑人",
"pic_url": "http://img31.mtime.cn/mt/2014/04/14/142239.57219598_96X128.jpg"
},
{
"movieId": "210066",
"movieName": "爱你一世一生",
"pic_url": "http://img31.mtime.cn/mt/2014/04/10/121437.97963221_96X128.jpg"
}
],
"error_code": 0
}
Css样式
<style type
="text/css">
#box
{
width
: 38%;
display
: flex
;
justify
-content
: space
-between
;
flex
-wrap
: wrap
;
margin
: 0px auto
;
}
#son img
{
width
: 100px
;
border
: 1px solid lightgray
;
border
-radius
: 10px
;
padding
: 10px
;
}
#son
{
width
: 122px
;
}
#son p
{
margin
-top
: 0px
;
margin
-right
: 0px
;
text
-align
: center
;
}
</style
>
Html
<body
>
<div id
="box"></div
>
</body
>
具体实现方法（中心思路：数据否可以点出来，遇到数组可以循环遍历数据）
<script type
="text/javascript" src
="js/ajax.js"></script
>
<script type
="text/javascript">
ajax("GET", "data/my.json", true, function(restxt
) {
var json
= JSON.parse(restxt
);
var res
= json
.result
;
for (var i
= 0; i
< res
.length
; i
++) {
var imgs
= document
.createElement("img");
var ps
= document
.createElement("p");
var divs
= document
.createElement("div");
divs
.setAttribute("id", "son");
imgs
.setAttribute("src", res
[i
].pic_url
);
ps
.innerHTML
= res
[i
].movieName
;
divs
.appendChild(imgs
);
divs
.appendChild(ps
);
document
.getElementById("box").appendChild(divs
);
}
});
</script
>
整体实现效果
