本文共 2892 字，大约阅读时间需要 9 分钟。

1. JSON 数据

1.1 JSON 是什么

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

   	
    
     tom
    	
    
     20
    	
    
     男
    
   

• 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 = 0for(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)

2.4 分页练习

• 实现翻页功能

  
   
    
    
      
           
     
壹米滴答
      
     
        
      
109 条面试评价
        
      
23 个在招职位
        
      
91% 简历处理率
      
     
      
     
共建中国最强物流网络平台
      
     
        
      
      
       企业服务
      
        
      
      
       成长型(B型)
      
        
      
      
       上海
      
      
     
    
    
  
   
  
   
    
    
      
           
           
           
         
    
  
   

3. 总结

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

转载地址：http://ucqwi.baihongyu.com/