JavaScript 动态数据处理

1. JSON 数据

1.1 JSON 是什么

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式
JSON 格式适用于服务器端和Javascript客户端交互
JSON 是基于纯文本的数据格式
浏览器的 JSON 插件使用
- JSONView
xml

<student>
	<name>tom</name>
	<age>20</age>
	<sex>男</sex>
</student>

json

{
    
    
	"student":{
    
    
		"name":"tom",
		"age":20,
		"sex":"男"
	}
}

1.2 JSON 数据的类型

数组类型

在这里插入图片描述

对象类型

在这里插入图片描述

1.3 JSON 的语法

JSON对象的创建

var student = {
    
    
	"name":"Tom",
	"age":"18",
	"sex":"男"
}

1.4 JSON 数据的常见操作方法

JSON 对象成员的访问
- 成员访问符 .
- 字符串键值访问

var product = {
    
    "pName":"IPhoneX","Price":"8000","Color":"red"}
// JSON 数据的访问方式比 xml 简便，是服务器和客户端数据交互的主要载体
alert('价格'+ product.Price) // 成员访问符方式
alert('价格'+ product["Price"]) // 键值字符串方式

JSON 数据的遍历

for(key in JSONobj）{
    
    
	console.log(JSONobj[key]);
}

1.5 复杂的 JSON 对象

var students ={
    
    
  "data": [ 
     {
    
    "name":"Tom","age":18,"sex":"男"},
     {
    
    "name":"Jack","age":22,"sex":"男"},
     {
    
    "name":"Mary","age":19,"sex":"女"},
  ]
}

1.6 获取 JSON 数据练习

根据提供的 json 数据，获取所有雅芳产品的总数

//  统计产品数量
var products = {
    
    
    "data": [
        {
    
    
            "type": "【非自营】",
            "imgPath": "http://p4.jmstatic.com/product/005/175/5175404_std/5175404_350_350.jpg",
            "title": "Dior迪奥香水小样套装Q版5ml*4 甜心+魅惑+真我浓香+真我淡香",
            "price": "115",
            "brand": "迪奥"
        },
        {
    
    
            "type": "【非自营】",
            "imgPath": "http://p4.jmstatic.com/product/005/121/5121684_std/5121684_350_350.jpg",
            "title": "Dior迪奥香水小样套装Q版 【白礼盒】(花漾+魅惑+真我5ml)",
            "price": "85",
            "brand": "迪奥"
        },
        {
    
    
            "type": "【自营】",
            "imgPath": "http://p3.jmstatic.com/product/004/012/4012938_std/4012938_350_350.jpg",
            "title": "迪奥小姐花漾淡香氛5ml",
            "price": "80",
            "brand": "迪奥"
        },
        {
    
    
            "type": "【自营】",
            "imgPath": "http://p3.jmstatic.com/product/004/012/4012938_std/4012938_350_350.jpg",
            "title": "克丽丝汀迪奥迪奥小姐花漾淡香水（又名淡香氛) 5ml",
            "price": "89",
            "brand": "迪奥"
        },
        ...
        ]  
}

var count = 0
for(key in products['data']){
    
    
    if(products['data'][key].brand == '雅芳') {
    
    
        count++
    }

}
alert('雅芳商品总数为:' + count)

2. JSON 数据的实战应用

2.1 DOM 加载 JSON 对象

JSON 和 DOM 结合完成页面内容的展示

在这里插入图片描述

<style media="screen">
  *{
     
     margin: 0;padding: 0;}
  
  ul{
     
     list-style: none;}
  
  li{
     
     
    width: 300px;
    height: 400px;
    border: 1px solid #ccc;
    padding: 10px;
    float: left;
    margin: 10px;
  }
  
  h4{
     
     color: #f00}
  
  img{
     
     width: 100%}
  
  p{
     
     font-weight: 700}
</style>

<script>
	var products = {
     
     
	    "data": [
	        {
     
     
	            "type": "【非自营】",
	            "imgPath": "http://p4.jmstatic.com/product/005/175/5175404_std/5175404_350_350.jpg",
	            "title": "Dior迪奥香水小样套装Q版5ml*4 甜心+魅惑+真我浓香+真我淡香",
	            "price": "115",
	            "brand": "迪奥"
	        },
	        {
     
     
	            "type": "【非自营】",
	            "imgPath": "http://p4.jmstatic.com/product/005/121/5121684_std/5121684_350_350.jpg",
	            "title": "Dior迪奥香水小样套装Q版 【白礼盒】(花漾+魅惑+真我5ml)",
	            "price": "85",
	            "brand": "迪奥"
	        },
	        {
     
     
	            "type": "【自营】",
	            "imgPath": "http://p3.jmstatic.com/product/004/012/4012938_std/4012938_350_350.jpg",
	            "title": "迪奥小姐花漾淡香氛5ml",
	            "price": "80",
	            "brand": "迪奥"
	        },
	        {
     
     
	            "type": "【自营】",
	            "imgPath": "http://p3.jmstatic.com/product/004/012/4012938_std/4012938_350_350.jpg",
	            "title": "克丽丝汀迪奥迪奥小姐花漾淡香水（又名淡香氛) 5ml",
	            "price": "89",
	            "brand": "迪奥"
	        },
	        ...
	     ]  
	}
	
	window.onload = function(){
     
     
	  var ul = document.getElementById('products')
	  var strHTML = ''
	  for(var i = 0; i < products.data.length; i++){
     
     
	  	// 利用 ES6 字符串模版拼接
	    strHTML += `<li>
	                    <h4>${
       
       products.data[i].type}</h4>
	                    <img src="${
       
       products.data[i].imgPath}" alt="">
	                    <h4>${
       
       products.data[i].title}</h4>
	                    <p>${
       
       products.data[i].price}</p>
	                </li>`
	  }
	  ul.innerHTML = strHTML
	}
</script>

<body>
    <ul id="products">
        <!-- <li>
            <h4>【非自营】</h4>
            <img src="http://p4.jmstatic.com/product/005/175/5175404_std/5175404_350_350.jpg" alt="">
            <h4>Dior迪奥香水小样套装Q版5ml*4 甜心+魅惑+真我浓香+真我淡香</h4>
            <p>115</p>
        </li> -->
    </ul>
</body>

2.2 分页处理算法

数据总数：recordCount
每页记录数：pageSize
总页数：pageCount = Math.ceil(recordCount / pageSize)

2.3 分页显示算法

当前页：Index（从0开始计算）
- 第1页：[0~pageSize)
- 第2页：[1*pageSize~2*pageSize)
- 第3页：[2*pageSize~3*pageSize)
- 。。。。
- 第n页：[index*pageSize ~（index+1）*pageSize)

<style media="screen">
  *{
     
     margin: 0;padding: 0;}
  ul{
     
     list-style: none;}
  li{
     
     
    width: 300px;
    height: 400px;
    border: 1px solid #ccc;
    padding: 10px;
    float: left;
    margin: 10px;
  }
  h4{
     
     color: #f00}
  img{
     
     width: 100%}
  p{
     
     font-weight: 700}
  #pages {
     
     
    height: 15px;
    clear: both;
  }
  #pages li {
     
     
    float: left;
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 15px;
    margin: 15px;
    border: 1px solid red;
  }
</style>
<script>
    var products = {
     
     
        "data": [
	        {
     
     
	            "type": "【非自营】",
	            "imgPath": "http://p4.jmstatic.com/product/005/175/5175404_std/5175404_350_350.jpg",
	            "title": "Dior迪奥香水小样套装Q版5ml*4 甜心+魅惑+真我浓香+真我淡香",
	            "price": "115",
	            "brand": "迪奥"
	        },
	        {
     
     
	            "type": "【非自营】",
	            "imgPath": "http://p4.jmstatic.com/product/005/121/5121684_std/5121684_350_350.jpg",
	            "title": "Dior迪奥香水小样套装Q版 【白礼盒】(花漾+魅惑+真我5ml)",
	            "price": "85",
	            "brand": "迪奥"
	        },
	        {
     
     
	            "type": "【自营】",
	            "imgPath": "http://p3.jmstatic.com/product/004/012/4012938_std/4012938_350_350.jpg",
	            "title": "迪奥小姐花漾淡香氛5ml",
	            "price": "80",
	            "brand": "迪奥"
	        },
	        {
     
     
	            "type": "【自营】",
	            "imgPath": "http://p3.jmstatic.com/product/004/012/4012938_std/4012938_350_350.jpg",
	            "title": "克丽丝汀迪奥迪奥小姐花漾淡香水（又名淡香氛) 5ml",
	            "price": "89",
	            "brand": "迪奥"
	        },
	        ...
	     ]         
    }

    var recordCount = 0  // 总记录数
    var pageSize = 8     // 每页显示记录数
    var pageCount = 0    // 总页数
    var pageIndex = 0    // 当前页的索引值

    // 初始化分页符
    function initPage(){
     
     
        var ulPages = document.getElementById('pages')
        var strPages = ''
        for (var i = 0; i < pageCount; i++) {
     
     
          // 在分页符上设置点击事件
          strPages += `<li οnclick="showData(${
       
       i})">${
       
       i+1}</li>`
        }
        ulPages.innerHTML = strPages
    }

    // 设置当前页数据方法
    function showData(index){
     
     
    	// 将点击的分页符的索引赋值给当前页索引
        pageIndex = index
        initData()
    }

    // 显示具体数据方法
    function initData(){
     
     
        var ul = document.getElementById('products')
        var strHTML = ''
        // 循环区间为显示商品的个数 pageSize
        for(var i = pageIndex*pageSize; i < (pageIndex+1)*pageSize; i++){
     
     
          // products.data[i].type
          if (products.data[i]) {
     
     
            strHTML += `<li>
                            <h4>${
       
       products.data[i].type}</h4>
                            <img src="${
       
       products.data[i].imgPath}" alt="">
                            <h4>${
       
       products.data[i].title}</h4>
                            <p>${
       
       products.data[i].price}</p>
                        </li>`
          }

        }
        ul.innerHTML = strHTML
    }

    window.onload = function(){
     
     
      // 获取总记录数
      recordCount = products.data.length
      // 计算总页数
      pageCount = Math.ceil(recordCount / pageSize)

	  // 调用分页标识符方法
      initPage()

	  // 调用显示数据方法
      initData()
    }
</script>

<body>
    <!-- 商品列表 -->
    <ul id="products"></ul>

    <!-- 分页列表 -->
    <ul id="pages"></ul>
</body>
</html>

在这里插入图片描述

2.4 分页练习

实现翻页功能

在这里插入图片描述


<style media="screen">
  * {
     
     padding: 0;margin: 0;}
  img {
     
     
    width: 280px;
    height: 280px;
    float: left;
  }
  h4 {
     
     
    font-size: 40px;
    padding-top: 30px;
  }
  #content{
     
     
    position: relative;
    list-style: none;
    margin-top: 50px;
  }
  #content li {
     
     
    height: 50px;
    font-size: 25px;
    font-weight: bolder;
  }
  h5 {
     
     
    font-size: 25px;
    margin-left: 20px;
    height: 60px;
  }
  .pic1 {
     
     
    width: 15px;
    height: 18px;
    float: left;
    background-image: url(source/images/icon.png);
    background-repeat: no-repeat;
    margin-left: 30px;
  }
  .pic2 {
     
     
    width: 15px;
    height: 18px;
    float: left;
    background-image: url(source/images/icon.png);
    background-repeat: no-repeat;
    background-position: 0px -18px;
    margin-left: 30px;
  }
  .pic3 {
     
     
    width: 15px;
    height: 18px;
    float: left;
    background-image: url(source/images/icon.png);
    background-repeat: no-repeat;
    background-position: 0px -36px;
    margin-left: 30px;
  }
  #picc {
     
     
    width: 650px;
    height: 40px;
    float: left;
    margin-top: 20px;
    background-color: rgb(238, 226, 226);
    padding-top: 15px;
  }
  .content {
     
     
    width: 150px;
    font-size: 9px;
    float: left;
    padding-left: 10px;
  }
  #butt {
     
     
    clear: both;
    padding-top: 50px;
    text-align: center;
  }
  #all {
     
     
    width: 650px;
    height: 420px;
    border: 1px solid yellow;
    float: left;
  }
</style>
<script type="text/javascript">
  var shop = [
    {
     
     
      "companyName":"壹米滴答",
      "logopath":"adv1.jpg",
      "pingjiaCount":"109",
      "zhiweiCount":"23",
      "performRate":"91%",
      "web":"企业服务",
      "details":"共建中国最强物流网络平台",
      "place":"上海",
      "type":"成长型（B轮）"
    },
    {
     
     
      "companyName":"惠租车",
      "logopath":"adv2.jpg",
      "pingjiaCount":"169",
      "zhiweiCount":"7",
      "performRate":"99%",
      "web":"旅游",
      "details":"不来惠租车，你怎么知道自己可以更牛B!",
      "place":"上海",
      "type":"成长型（B轮）"
    },
    {
     
     
      "companyName":"斗象科技",
      "logopath":"adv3.jpg",
      "pingjiaCount":"153",
      "zhiweiCount":"31",
      "performRate":"97%",
      "web":"信息安全",
      "details":"互联网安全领导者（www.tophant.com - FreeBuf，漏洞盒子，网藤风险感知）",
      "place":"上海",
      "type":"成长型（B轮）"
    },
    {
     
     
      "companyName":"生意专家",
      "logopath":"adv4.jpg",
      "pingjiaCount":"45",
      "zhiweiCount":"18",
      "performRate":"81%",
      "web":"移动互联网，O2O",
      "details":"目光远大 努力奋斗 保持专注",
      "place":"上海",
      "type":"成长型（A轮）"
    },
    {
     
     
      "companyName":"即刻",
      "logopath":"adv5.jpg",
      "pingjiaCount":"6",
      "zhiweiCount":"2",
      "performRate":"98%",
      "web":"移动互联网",
      "details":"有口皆碑的产品+硅谷氛围+年轻团队+超棒福利，加入我们和「即刻」一起快速成长",
      "place":"上海",
      "type":"成长型（B轮）"
    },
    {
     
     
      "companyName":"么么直播",
      "logopath":"adv6.jpg",
      "pingjiaCount":"52",
      "zhiweiCount":"19",
      "performRate":"96%",
      "web":"移动互联网，社交网络",
      "details":"在最IN的城市，玩当下最火爆的事业！",
      "place":"上海",
      "type":"成长型（A轮）"
    }
  ]

  var picture = ['source/images/adv1.jpg','source/images/adv2.jpg','source/images/adv3.jpg','source/images/adv4.jpg','source/images/adv5.jpg','source/images/adv6.jpg']
  var recordCount = 0 // 总记录数
  var pageSize = 3 // 每页显示的记录数
  var pageCount = 0 // 总页数
  var pageIndex = 0 // 当前页的索引值
  var index = 0

  function first(){
     
     
    index = 0
    pageIndex = 0
    if (index == 0) {
     
     
      document.getElementById('first').disabled = true
      document.getElementById('second').disabled = false
      document.getElementById('three').disabled = true
      document.getElementById('four').disabled = false
    }
    initData()
  }

  function previous(){
     
     
    index -= 1
    pageIndex = index
    initData()
    if (index == 0) {
     
     
      document.getElementById('first').disabled = true
      document.getElementById('second').disabled = true
      document.getElementById('three').disabled = false
      document.getElementById('four').disabled = false
    }
  }

  function next(){
     
     
    index += 1
    pageIndex = index
    initData()
    if (index == pageCount-1) {
     
     
      document.getElementById('first').disabled = false
      document.getElementById('second').disabled = false
      document.getElementById('three').disabled = true
      document.getElementById('four').disabled = true
    }
  }

  function last(){
     
     
    index = pageCount
    pageIndex = pageCount-1
    initData()
    document.getElementById('first').disabled = false
    document.getElementById('second').disabled = false
    document.getElementById('three').disabled = false
    document.getElementById('four').disabled = false
  }

  function initData(){
     
     
    var main = document.getElementById('main')
    var strHTML = ''
    for (var i = pageIndex*pageSize; i < (pageIndex+1)*pageSize; i++) {
     
     
      if (shop[i]) {
     
     
        strHTML += `<div id="all">
          <img src="${
       
       picture[i]}" alt="">
          <h4>${
       
       shop[i].companyName}</h4>
          <ul id="content">
            <li>${
       
       shop[i].pingjiaCount} 条面试评价</li>
            <li>${
       
       shop[i].zhiweiCount} 个在招职位</li>
            <li>${
       
       shop[i].performRate} 简历处理率</li>
          </ul>
          <h5>${
       
       shop[i].details}</h5>
          <div id="picc">
            <div class="pic1"></div><div class="content">${
       
       shop[i].web}</div>
            <div class="pic2"></div><div class="content">${
       
       shop[i].type}</div>
            <div class="pic3"></div><div class="content">${
       
       shop[i].place}</div>
          </div>
        </div>`
      }
    }
    main.innerHTML = strHTML
  }

  window.onload = function(){
     
     
    recordCount = shop.length
    pageCount = Math.ceil(recordCount/pageSize)
    initData()
  }

</script>

<body>
  <div id="main">
    <div id="all">
      <img src="source/images/adv1.jpg" alt="">
      <h4>壹米滴答</h4>
      <ul id="content">
        <li>109 条面试评价</li>
        <li>23 个在招职位</li>
        <li>91% 简历处理率</li>
      </ul>
      <h5>共建中国最强物流网络平台</h5>
      <div id="picc">
        <div class="pic1"></div><div class="content">企业服务</div>
        <div class="pic2"></div><div class="content">成长型(B型)</div>
        <div class="pic3"></div><div class="content">上海</div>
      </div>
    </div>
  </div>
  <div>
    <div id="butt">
      <input type="button" name="" value="第一页" id="first" onclick="first()">
      <input type="button" name="" value="上一页" id="second" onclick="previous()">
      <input type="button" name="" value="下一页" id="three" onclick="next()">
      <input type="button" name="" value="最后一页" id="four" onclick="last()">
    </div>
  </div>
</body>

3. 总结

使用 JSON 动态获取数据，做个笔记

JavaScript 动态数据处理

1. JSON 数据

1.1 JSON 是什么

1.2 JSON 数据的类型

1.3 JSON 的语法

1.4 JSON 数据的常见操作方法

1.5 复杂的 JSON 对象

1.6 获取 JSON 数据练习

2. JSON 数据的实战应用

2.1 DOM 加载 JSON 对象

2.2 分页处理算法

2.3 分页显示算法

2.4 分页练习

3. 总结

猜你喜欢

目录

热门文章