HTML基础-05 js遍历拿数据

最新推荐文章于 2022-11-01 10:23:36 发布

V_zcm

最新推荐文章于 2022-11-01 10:23:36 发布

阅读量539

点赞数

分类专栏： HTML 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_59214979/article/details/121016924

版权

HTML 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

本文介绍了如何使用原生JavaScript和AJAX技术获取和展示数据，包括直接操作DOM和通过HTTP请求从服务器获取JSON数据。首先展示了如何遍历本地数组，然后是通过Ajax获取并解析JSON数据，实现动态内容填充。

摘要由CSDN通过智能技术生成

(1)js遍历拿数据

1.页面写一个点击事件
<button οnclick="fun51()">点击出现内容2</button>
<div id="m"></div>
2.获取div内容，然后遍历获取vue里面的数据，再innerhtml输出
</script>
function fun51(){
           let outnr = document.getElementById("m");
           let innr = "";
           for (let xh of arr51) {
               innr += "编号：" + xh.id + "</br>";
               innr += "商品名：" +xh.name + "</br>";
               innr += "分类：" + xh.categoryName + "</br>";
               innr += "商家：" + xh.shopName + "</br>";
               innr += "图片：<img src=" + xh.imgs[0] + " style='width:150px;height:150px'>"+ "</br>";
               innr += "价格：" + xh.price + "</br>";
               innr += "市场价：" + xh.markePrice + "</br>";
               innr += "<hr/><hr/>";
               outnr.innerHTML = innr;//innerHTML输出代码
           }
       }
   </script>

（2）原生js遍历拿数据

1.页面写一个按钮和div，div来输出内容
<button οnclick="connet()">点击出现内容</button>
<div id="a"></div>

2.   <script>
       let arr41 = {
           directors: ["拜伦·霍华德", "瑞奇·摩尔", "杰拉德·布什"],
           rate: "9.2",
           title: "疯狂动物城",
           url: "https:\/\/movie.douban.com\/subject\/25662329\/",
           casts: ["金妮弗·古德温", "杰森·贝特曼", "伊德里斯·艾尔巴", "珍妮·斯蕾特", "内特·托伦斯"],
           cover: "https://img1.doubanio.com\/view\/photo\/s_ratio_poster\/public\/p2614500649.jpg",
           id: "25662329",
       };

function connet() {
           let b = document.getElementById("a");
           let kong = "";
           kong += "电影导演：<span stlye='color:red'>" + arr41.directors + "</span><br/>";
           kong += "电影评分：" + arr41.rate + "<br/>";
           kong += "电影名：" + arr41.title + "<br/>";
           kong += "电影链接：" + arr41.url + "<br/>";
           kong += "主演：" + arr41.casts + "<br/>";
           kong += "详情网页：" + arr41.cover + "<br/>";
           b.innerHTML = kong;
       }
   </script>

（3）原生js遍历拿数据，ajax,从服务器链接拿数据

1.页面内容
<button id="ms">点击出现内容2</button>
<div id="a"></div>

2.script内容
<script>
$(function () {

$("#ms").click(function () {
$.ajax({
method: "GET",//请求模式，默认是GET
headers: {//请求头，可以省略
Accept: "application/json; charset=utf-8"
},
url: "http://yhjtp.com/testjson.json",//请求路径，必传
// data: { name: "John", location: "Boston" }//请求参数
}).done(function (msg) {//当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调
msg = JSON.parse(msg)//JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
console.log(msg)//服务端返回数据
let kong = "";
for (let i of msg.data) {

kong += "电影导演：<span stlye='color:red'>" + i.directors + "</span><br/>";
kong += "电影评分：" + i.rate + "<br/>";
kong += "电影名：" + i.title + "<br/>";
kong += "电影链接：" + i.url + "<br/>";
kong += "主演：" + i.casts + "<br/>";
kong += "封面:<img src='" + i.cover + "' style='width:100px;height:100px' /><br/>";
kong += "详情网页：" + i.cover + "<br/>";
kong += "<hr/><hr/>"
$("#a").html(kong);
}
});
})

})
</script>