使用JS实现无刷新读取json接口数据

使用JS实现无刷新读取json接口数据

Ajax方法

//ajax
function ajax(method, url, asy, fn) {
	//创建Ajax对象
	if (window.XMLHttpRequest) {
		var objAjax = new XMLHttpRequest();
	} else { // IE6, IE5 浏览器执行
		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) {
		//获取json
		var json = JSON.parse(restxt);
		//获取result数组
		var res = json.result;
		//循环
		for (var i = 0; i < res.length; i++) {
			//创建img标签
			var imgs = document.createElement("img");
			//创建p标签
			var ps = document.createElement("p");
			//创建div标签
			var divs = document.createElement("div");
			divs.setAttribute("id", "son");
			//向img中插入图片路径
			imgs.setAttribute("src", res[i].pic_url);
			//向p标签中插入文字
			ps.innerHTML = res[i].movieName;
			//div中追加img和p标签
			divs.appendChild(imgs);
			divs.appendChild(ps);
			//box中追加div
			document.getElementById("box").appendChild(divs);
		}
	});
</script>

整体实现效果