JavaScript 动态数据处理

tech2022-08-08 151

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. 总结

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 结合完成页面内容的展示

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 分页练习

实现翻页功能

3. 总结

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

最新回复(0)