这里需要注意一点的是，因为是使用Ajax 异步加载商品，动态创建html然后返回客户端，所以需要把某件商品的信息全部写到JSON中，比如商品图片，商品信息，单价，数量，金额等。然后再循环遍历每一个数组中的元素，通过点操作将数据写入浏览器中。

以下是Ajax异步获取商品的js代码。输入'lan'回车或者输入'音速3'回车。当然，可以在JSON中自行修改字符串的匹配。需要注意的是，因为是按下回车之后的查询，所以当event.which===13的时候，调用了shoppingCart()函数。

1 //购物车存放产品--- 通用function 2 function shoppingCart(){ 3 //获取输入框的值，用于字符串匹配 4 var $val = $('.header-search-input').val(); 5 $.get('basketballShoes.json',{'Query':$val}, function(data) { 6 for (var i = 0; i < data.length; i++) { [i][0].Query) { 8 //字符串匹配 9 //当输入'lan'时，会匹配第一个数组 10 //当输入'音速3'时，会匹配第二个数组。 11 //也可以自行修改字符串匹配规则。 12 var $data = data[i][0].Results[0].Suggests; 13 var $html = ''; 14 //使用$.each()方法循环每一个$data， 15 //然后动态加载html, 16 //把相应的商品信息放到指定的.commodityContainer容器中 17 $.each($data, function(index, val) { 18 $html+='<div class="mainCommodity">'; 19 $html+='<div class="shopInfo">'; 20 $html+='<div class="shopMsg">'; 21 //$.each()中回调函数中的第二个参数指定的是每一个值， 22 //通过点操作来获取每个字段。 23 //比如val.label 就为 '李宁2016新款男子篮球鞋音速3高帮反弹篮球场地鞋ABAL031'。 24 //下面的操作相同。 25 $html+='<input type="checkbox" name="shopMsg" id="'+val.label+'" class="shopMsg-input" autocomplete="off">'; 26 $html+='<label for="'+val.label+'">'; 27 $html+='店铺：'; 28 $html+='</label>'; 29 $html+='<a href="#">'+val.shop+''; 30 $html+='</a>' 31 $html+='</div>'; 32 $html+='</div>'; 33 $html+='<div class="commodityInfo">'; 34 $html+='<ul>'; 35 $html+='<li class="td-chk">'; 36 $html+='<div class="td-inner">'; 37 $html+='="checkbox" autocomplete="off">'; 38 $html+='</div>'; 39 $html+='</li>'; 40 $html+='<li class="td-item">'; 41 $html+='<div class="td-inner">'; 42 $html+='="#">'; 43 $html+='="'+val.image+'">'; 44 $html+='</a>'; 45 $html+='<div class="item-info">'; 46 $html+='<div class="item-basis-info">'; 47 $html+='<a href="#">'+val.Txt+''; 48 $html+='</a>'; 49 $html+='</div>'; 50 $html+='<div class="item-other-info">'; 51 $html+='>'; 52 $html+='<div class="item-other-list">'; 53 $html+='="支持信用卡支付">'; 54 $html+='="'+val.bandCard+'">'; 55 $html+='</a>'; 56 $html+='="7天无理由" class="sevenDay">'; 57 $html+='="'+val.sevenDay+'">'; 58 $html+='</a>'; 59 $html+='="消费者保障服务">'; 60 $html+='="'+val.guarantee+'">'; 61 $html+='</a>'; 62 $html+='</div>'; 63 $html+='</div>'; 64 $html+='</div>'; 65 $html+'</div>'; 66 $html+='</li>'; 67 $html+='<li class="td-info">'; 68 $html+='<div class="td-info-msg">'; 69 $html+='<p>'+val.color+'</p>'; 70 $html+='<p>'+val.size+'</p>'; 71 $html+='</div>'; 72 $html+='</li>'; 73 $html+='<li class="td-price">'; 74 $html+='<div class="td-inner">'; 75 $html+='<p class="non-discount">'+val.nonDiscount+'</p>'; 76 $html+='<p class="discount">￥'; 77 $html+='<span>'+val.num+'.00</span>'; 78 $html+='</p>'; 79 $html+='<div class="promotion">卖家促销'; 80 $html+='>'; 81 $html+='</div>'; 82 $html+='<div class="proSlidedown">'; 83 $html+='<p class="newPro">卖家促销：秋季特惠</p>'; 84 $html+='<p>优惠：￥200.00</p>'; 85 $html+='</div>'; 86 $html+='</div>'; 87 $html+='</li>'; 88 $html+='<li class="td-amount">'; 89 $html+='<div class="item-amount">'; 90 $html+='="amount-left amount-color">-</a>'; 91 $html+='=="off" />'; 92 $html+='="amount-right">+</a>'; 93 $html+='</div>'; 94 $html+='<div class="stock">'+val.max+'</div>'; 95 $html+='<div class="outNum">'; 96 $html+='<span class="instr">最多只能购买</span>'; 97 $html+='>'; 98 $html+='<em>件</em>'; 99 $html+='</div>'; 100 $html+='</li>'; 101 $html+='<li class="td-sum">'; 102 $html+='<em>￥</em>' 103 $html+='<span>'+val.num+'.00</span>'; 104 $html+='</li>'; 105 $html+='<li class="td-operation">'; 106 $html+='<p>'; 107 $html+='="delete">删除</a>'; 108 $html+='</p>'; 109 $html+='</li>'; 110 $html+='</ul>'; 111 $html+='</div>'; 112 $html+='</div>'; 113 //将动态加载的html放到指定的容器中， 114 //这里首先应该在html中放上一个空容器 115 //> 116 $('.commodityContainer').html($html); 117 }); 118 } 119 } 120 }); 121 }

3.事件代理和事件冒泡

简单的介绍一下这两个概念吧。