javascript中的ajax案例应用

不念不忘少年蓝@ 2022-01-26 14:11 214阅读 0赞

## ajax应用 ##

css
      * {
                padding: 0;
                margin: 0;
            }
            .content{
                position:relative;
                top: 0;
                left: 0;
                width: 346px;
                height: 220px;
                background-color: white;
            }
            .imgbox{
                position: absolute;
                top: 0;
                left: 0;
                width: 130px;
                height: 220px;
            }
            .imgbox img{
            	width: 130px;
                height: 220px;
            }
            .tite{
                position: relative;
                top: 0;
                right: -133px;
                width: 190px;
                height: 220px;
                background-color: white;
            }
            button{
                position: absolute;
                left: 0;
                bottom: 45px;
                width: 100px;
                height: 40px;
                background-color: #f5a624;
                border: 0;
            }
            .small progress{
               width: 75px;
               margin-left: 3px;
            }

json代码
    {
    	"success": "true",
    	"code": "200",
    	"msg": "请求成功",
    	"data": [
    		{
    			"id": "00001",
    			"name": "\u65bd\u534e\u853b\u4f0a\u91c7\u67d3\u53d1\u818f60ml",
    			"brand": "\u65bd\u534e\u853b",
    			"original_price": "100",
    			"inventory": "1062",
    			"thumbnail": "https:\/\/fjlyl.xyz\/assets\/hairDye\/products%20(1).jpg",
    			"product_id": "00021",
    			"time_start": "2019-05-28 15:00:00",
    			"time_end": "2019-05-28 16:00:00",
    			"total": "897",
    			"reduct_price": "63",
    			"stock": "190"
    		}, {
    			"id": "00002",
    			"name": "\u65bd\u534e\u853b\u4f0a\u91c7\u67d3\u53d1\u818f100ml",
    			"brand": "\u65bd\u534e\u853b",
    			"original_price": "264",
    			"inventory": "2615",
    			"thumbnail": "https:\/\/fjlyl.xyz\/assets\/hairDye\/products%20(2).jpg",
    			"product_id": "00022",
    			"time_start": "2019-05-28 18:00:00",
    			"time_end": "2019-05-28 20:00:00",
    			"total": "1676",
    			"reduct_price": "58",
    			"stock": "1228"
    		}, {
    			"id": "00003",
    			"name": "\u65bd\u534e\u853b\u4f0a\u91c7\u67d3\u53d1\u818f200ml",
    			"brand": "\u65bd\u534e\u853b",
    			"original_price": "97",
    			"inventory": "3001",
    			"thumbnail": "https:\/\/fjlyl.xyz\/assets\/hairDye\/products%20(3).jpg",
    			"product_id": "00023",
    			"time_start": "2019-05-28 01:00:00",
    			"time_end": "2019-05-28 02:00:00",
    			"total": "1504",
    			"reduct_price": "87",
    			"stock": "82"
    		}, {
    			"id": "00004",
    			"name": "\u6b27\u83b1\u96c5\uff08LOREAL\uff09\u5353\u97f5\u971c\u62a4\u53d1\u67d3\u53d1\u971c\uff031\uff08\u81ea\u7136\u9ed1\u8272\u67d3\u53d1\u5242 ",
    			"brand": "\u6b27\u83b1\u96c5",
    			"original_price": "50",
    			"inventory": "3956",
    			"thumbnail": "https:\/\/fjlyl.xyz\/assets\/hairDye\/products%20(4).jpg",
    			"product_id": "00024",
    			"time_start": "2019-05-28 08:00:00",
    			"time_end": "2019-05-28 10:00:00",
    			"total": "740",
    			"reduct_price": "44",
    			"stock": "714"
    		}
    	]
    }

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220126/7f923335456a4265bef9c6a53fcc7c1b.png