使用JS实现无刷新读取json接口数据
2024-05-07 11:04:50
使用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) {//获取jsonvar 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中追加divdocument.getElementById("box").appendChild(divs);}});
</script>整体实现效果
使用JS实现无刷新读取json接口数据相关推荐
- Qt读取Json文件数据
Qt读取Json文件数据 void TcpServerCfg::initServerCfgList() {serverCfgList.clear();QString name = "./co ...
- 虚幻4 读取Json文件数据
虚幻4读取Json文件数据 1.用虚幻C++读取文件目录 TEXT(内写文件路径以及名称) FString DATA;if (FFileHelper::LoadFileToString(DATA, T ...
- python爬取天气存入excel_Python接口读取json天气预报数据自动写入到Excel表格
之前我的一篇文章: https://blog..net/zhangphil/article/details/88538112 是把从服务器接口读取到的json天气预报数据画制成折线图.现在把从json ...
- php使用 js格式解析,JavaScript解析JSON格式数据的方法示例
本文实例讲述了JavaScript解析JSON格式数据的方法.分享给大家供大家参考,具体如下: 1.使用JavaScript提供的eval()函数function JsonText1() { var ...
- 无刷新读取数据库 (ajax)
为什么80%的码农都做不了架构师?>>> <html> <head> <script type="text/javascript&quo ...
- jQueryUI Repeater 无刷新删除 新建 更新数据 - JQueryElement [7]
接着给大家介绍 Repeater 的使用 ajax 更新删除和新建行的功能. 本次的示例是上个文章示例的延续, 其中 JQueryElement 更新到了 3.1.1, 使 repeater 自身包 ...
- 滚动加载数据 php,无刷新动态加载数据 滚动条加载适合评论等页面
滚屏加载更多数据,适合评论等页面 本例的数据库很简单,一看就明了 复制代码 代码如下: $query=mysql_query("select * from content order by ...
- Jquery导航条淡进淡出相册（动态无刷新加载数据库数据）
原理:AJAX动态加载数据库中图片信息给游览器,利用2个叠词div动态修改内部图片透明度做出淡进淡出效果.(IE6无效) 难点:json数组操作. HTML:就是几个图片容器.加载大图的div pos ...
- 两种方式读取Json文件 数据
首先下载LitJson.dll 文件,并将其拖入 Unity项目中的 的 Assets/Plugins目录中 其次在你的Unity项目中创建好Assets/StreamingAssets文件夹,用于存 ...
最新文章
- github中SSH的Key
- python 程序开机自启动，亲测可用
- 定制AjaxControlToolkit（1）：使一个CalendarExtender对应N个TextBox
- jzoj6310-Global warming【线段树,LIS】
- 如何新建一个vue项目（图文详解）
- vue学习笔记-promise
- plsql导出表结构到excel_PLSQL怎样导出oracle表结构
- 约翰库缇斯的经典语录
- 解决qt.qpa.plugin: Could not load the Qt platform plugin “xcb“问题
- Revisiting Self-Training for Few-Shot Learning of Language Model
- std::cout彩色输出
- 从瓶盖挑战事件看企业如何做好新闻事件营销？
- android studio 使用夜神模拟器
- 微软、谷歌、百度等公司经典面试100题
- Terraform基础(一)-什么是Terraform？
- pccad无法找到所需的动态链接库_快帮忙啊，pccad中的问题！
- matlab imshow()函数显示白色图像问题
- java在各大领域应用现状及未来
- 将本地浏览器插件导出(Google浏览器)
- 经纬度(wgs)并且根据经纬度获取城市