商城排序实战案例(涉及AJAX，Jason，sort排序)

商城排序实战案例(涉及AJAX，Jason，sort排序)

一，话不多说，我们先来介绍一下本次案例，商城排序是针对于深度解析Sort方法所进行的实际案例练习，其中利用Ajax请求数据，对json数据进行解析并渲染到浏览器上，案例实现了多种数据的交互排序，用简单的CSS制作了一个排序图标，图标会根据请求做出不同的响应动作。
二，结构如下图所示，首先创建一个主文件夹，里面新建css img js json
等四个文件夹，其中除img文件夹里的随便找的图片外，其他文件我会以代码块的形式进行粘贴。

三
(1)css

// An highlighted block
html,body {
   
  width: 100%;
  height: 100%;
  background-color: #d0fadd2c;
}
#header {
   
 width: 1000px;
 height: 40px;
 line-height: 40px;
 margin: 30px auto;
 background: orange;
 box-sizing: border-box;
 font-size: 16px;
 padding: 0 10px;
 color: white;
 letter-spacing: 1px;
}
#header span {
   
  margin-right: 10px;
}
#header a {
   
  color: white;
  margin-right: 15px;
  position: relative;
}
#header a:hover {
   
  color: orangered;
}
#header a i {
   
  width: 0;
  height: 0;
  border:4px solid transparent;
  position: absolute;
}
#header a i.up {
   
  border-bottom-color: white;
  top:3px;
}
#header a i.down {
   
  border-top-color: white;
  top:15px;
}

#header a i.up.bg {
   
  border-bottom-color: red;
}
#header a i.down.bg {
   
  border-top-color: red;
}
/* 
=====================================
*/
#cardBox {
   
  width: 1000px;
  margin: 20px auto;
  display: flex;
  flex-wrap: wrap;
  
}
#cardBox li {
   
  width: 24%;
  box-sizing: border-box;
  padding: 10px;
  background: rgba(172, 255, 47, 0.336);
  margin: 0 .5% 10px .5%;
}

#cardBox li img {
   
  width: 100%;
  transition: all .2s;

}
#cardBox li img:hover {
   
  transform: scale(1.05);
}
#cardBox li span {
   
  display: block;
  margin-bottom: 5px;
  font-size: 18px;
  margin-left: 10px;
  color: orangered;
  transition: all .2s;
  cursor: pointer;
}
#cardBox li span:hover {
   
  text-shadow: 2px 2px 5px #000;

}

(2)json

// An highlighted block
[
  {
   
    "id": 1,
    "title": "HUAWEI全网通版（亮黑色）",
    "price": 499,
    "time": "2017-03-15",
    "hot":