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

tech2025-07-07  3

使用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>

整体实现效果

最新回复(0)