利用Ajax获取JSON数据

JSON对象与JSON字符串的相互转换

//JSON对象 属性名必须使用双引号包起来
var obj={"a":1,"b":2};
var ary=[{"a":1,"b":2},{"a":10,"b":20},{"a":100,"b":200}];

//JSON字符串:将JSON对象使用''包起来
var str1='{"a":1,"b":2}';
var str2='[{"a":1,"b":2},{"a":10,"b":20},{"a":100,"b":200}]';

//将JSON对象变成JSON字符串
//JSON.stringify(JSON对象)
console.log(JSON.stringify(obj));
console.log(JSON.stringify(ary));

//将JSON字符串变成JSON对象
//JSON.parse(JSON字符串)

console.log(JSON.parse(str1));
console.log(JSON.parse(str2));

Ajax获取数据四部曲:

//1.使用构造函数创建一个AJAX对象
var xhr=new XMLHttpRequest();
//2.打开一个URL地址并请求数据
//open("请求方式","数据的路径",是否异步)
xhr.open("GET","json/data.json",false);
//3.监听请求过程(状态的变化)事件
xhr.onreadystatechange=function () {
    if(xhr.status==200&&xhr.readyState==4){
        //获取的数据就是xhr.responseText,是一个JSON字符串
        data=JSON.parse(xhr.responseText);
    }
};
//4.发送数据
xhr.send(null);

将Ajax的数据渲染到页面中：

//1）：先准备一个空的ES6模板
var str=``;
//2）：forEach循环数据
data.forEach((item)=>{
    str+=`<h1>${item.name}</h1>`
});
//3）：将循环的结果赋值给元素
box.innerHTML=str;

电商网站中商品升序降序的实现原理：（以价格为例）

json的数据相当于类数组，在Ajax获取到数据之后，利用sort进行排序（实际就是价格相减），这样只能实现简单的升序功能，无法降序，要想升序降序都可以进行，我们可以给元素一个flag标记当前的值，当从升序转为降序的时候，flag*-1 即可以实现升序降序功能：具体代码如下：

for(let i=0;i<alist.length;i++){
    alist[i].flag = 1;
    alist[i].onclick=function(){
        this.flag *= -1;
        if(i==0){
            // alert(0)
            data.sort( (a,b) => {
                return (new Date(a.time)-new Date(b.time))*this.flag;
            });
            bindHTML(data);
        }else if(i==1){
            // alert(0)
            data.sort( (a,b) => {
                return (a.price-b.price)*this.flag;
            });
            bindHTML(data);
        }else if(i==2){
            // alert(0)
            data.sort( (a,b) => {
                return (a.hot-b.hot)*this.flag;
            });
            bindHTML(data);
        }
    }
}