首页 > 代码库 > 双十一活动开发技术总结
双十一活动开发技术总结
问题一：返现卷读接口展示品牌与接口的二级联动效果,并能跳转到相应的商城页
下面是读取商城接口返回的json数据格式，以及相关字段说明
[{ "id": 274, //跳转到商城的优惠Id "serialGroupgName": "奥迪Q3", //车系名称 "title": "多项优惠类型小活动", "manufacturerId": 1, //品牌Id "serialGroupId": 8670, //车系Id "beginTime": "2014-10-24 00:00:00", "manufacturerName": "一汽奥迪", //品牌名称 "stockCount": 395, //库存 "endTime": "2014-11-15 23:59:59"}]
由于外部的接口只有一个，而且将品牌车系都一起返回，没有分别返回品牌和车系，因此之前用过的伪下拉框插件用不了,附带以前用过的伪下拉框
<script src=http://www.mamicode.com/"http://js.3conline.com/min/temp/v1/dpl-related_select_v2,dpl-search_car_form.js"></script><script type="text/javascript">relatedSelect( {id: "pBrandNameBottom", url: "http://price.pcauto.com.cn/interface/5_3/brand_json_chooser_v2.jsp", node: {root: "brands", value: "text", text: "text", custom: "id"}, defaultValue:0, load: true}, {id: "pSeriesNameBottom", url: "http://price.pcauto.com.cn/interface/5_3/serial_json_chooser.jsp?brand=", node: {root: "firms", value: "text", text: "text", custom: "id"}, defaultValue:0});</script><select id="pBrandNameBottom"> <option value=http://www.mamicode.com/"">请选择品牌</option></select><select id="pSeriesNameBottom"> <option value=http://www.mamicode.com/"">请选择车系</option></select>
所以这次需要自己写接口处理商城接口返回的数据
先展示一下我们要实现的效果图
<span class="aBtn clearfix" id="JfxBtn"> <a href="javascript:void(0);" id="fx_500" ><img src="http://www1.pcauto.com.cn/zt/s141103/images/img1.jpg" width="325" height="162" ></a> <a href="javascript:void(0);" id="fx_1500" ><img src="http://www1.pcauto.com.cn/zt/s141103/images/img2.jpg" width="325" height="162"></a> <a href="javascript:void(0);" id="fx_1000" ><img src="http://www1.pcauto.com.cn/zt/s141103/images/img3.jpg" width="325" height="162"></a></span>要达到的效果如：当我们点击“支付88元返现500”的图片时，弹窗中的数据是通过调用接口
http://mall.pcauto.com.cn/autoMall/interface/activity/activity_manuSgList.jsp?aId=大活动ID&price=88拿到的
弹窗如下:
<!-- 返现弹框--><div class="fx_box" id="Jfx_box" style="display:none"> <a href="javascript:void(0)" class="closeBtn closeBtn1"></a> <form action="index_ok.jsp" id="fx_form" method="post"> <input type="hidden" name="price" id="price" value=""> <span class="how_much">200元返现</span> <p class="changecar"><strong>选择意向车系</strong> <select class="selwid148" id="pBrandNameBottom"><option value="">选择活动品牌</option></select> <select class="selwid148" id="pSeriesNameBottom"><option value="">选择活动车系</option></select></p> <a href="" class="fx_btn"></a> </form></div>
点击事件：
//返现$("#JfxBtn a").click(function(){ if ($(this).attr("id") == "fx_500") { $(".how_much").html("500元返现");//更换弹窗文字 freshBrand(88);//调用接口展示品牌 }else if ($(this).attr("id") == "fx_1000") { $(".how_much").html("1000元返现"); freshBrand(188); }else if ($(this).attr("id") == "fx_1500") { $(".how_much").html("1500元返现"); freshBrand(288); } $.blockUI({message: $("#Jfx_box"),css:{width:‘585px‘,height:‘256px‘,cursor:‘default‘,border:‘none‘,background:‘none‘}}); //弹窗 });
车系与品牌联动的js：
//车系下拉 function freshSeries(price, brandId) { $("#pSeriesNameBottom").html("<option value=http://www.mamicode.com/‘‘>选择活动车系"); $.get("http://mall.pcauto.com.cn/huodong/20141111e/interface/fx_activity.jsp", {price:price, brandId: brandId, r:(new Date()).getTime()}, function(data){ data = $.trim(data); var jsonObj = eval("("+data+")"); var text = ""; //拼接下拉框文本 for (i = 0; i < jsonObj.list.length; i++) { var series = jsonObj.list[i]; text += "<option value=http://www.mamicode.com/‘" + series.target_id + "‘>" + series.name + "</option>"; if (i == 0) { $(".fx_btn").prop("href", "http://mall.pcauto.com.cn/r3/s" + series.target_id + "/"); } } if (text != ‘‘) $("#pSeriesNameBottom").html(text); $("#pSeriesNameBottom").unbind("change"); //车系下拉框触发改变事件，跳转链接发生改变 $("#pSeriesNameBottom").change(function(){ var seriesId = $(this).val(); $(".fx_btn").prop("href", "http://mall.pcauto.com.cn/r3/s" + seriesId + "/"); }); }); } //品牌下拉 function freshBrand(price) { $("#pBrandNameBottom").html("<option value=http://www.mamicode.com/‘‘>选择活动品牌"); $("#pSeriesNameBottom").html("<option value=http://www.mamicode.com/‘‘>选择活动车系"); $.get("http://mall.pcauto.com.cn/huodong/20141111e/interface/fx_activity.jsp", {price:price, r:(new Date()).getTime()}, function(data){ data = $.trim(data); var jsonObj = eval("("+data+")"); var text = ""; //拼接下拉框文本 for (i = 0; i < jsonObj.list.length; i++) { var brand = jsonObj.list[i]; text += "<option value=http://www.mamicode.com/‘" + brand.id + "‘>" + brand.name + "</option>"; if (i == 0) { freshSeries(price, brand.id); } } //显示 if (text != ‘‘) $("#pBrandNameBottom").html(text); $("#pBrandNameBottom").unbind("change"); //品牌下拉框改变触发事件,同步车系 $("#pBrandNameBottom").change(function() { var brandId = $(this).val(); freshSeries(price, brandId); }); }); }
无brandId时
http://mall.pcauto.com.cn/huodong/20141111e/interface/fx_activity.jsp?price=88
接口返回的数据：
{"list":[{id:57, name:"奇瑞汽车", target_id:121},{id:375, name:"上海大众斯柯达", target_id:123},{id:17, name:"一汽马自达", target_id:131},{id:78, name:"江淮汽车", target_id:133},{id:407, name:"长安马自达", target_id:186},{id:30, name:"雷克萨斯", target_id:135},{id:660, name:"上汽大通MAXUS", target_id:146}]}接口返回的数据中id表示品牌id,name 是品牌名称，target_id表示商城优惠Id,不过由于优惠是与车系关联的，在这里没什么用
有brandId时：
http://mall.pcauto.com.cn/huodong/20141111e/interface/fx_activity.jsp?price=88&brandId=57
接口返回的数据：
{"list":[{id:9313, name:"艾瑞泽7", target_id:121},{id:8580, name:"奇瑞E3", target_id:114},{id:8880, name:"奇瑞QQ", target_id:122},{id:10771, name:"瑞虎3", target_id:134},{id:4100, name:"风云2", target_id:145}]}接口返回的数据中id表示车系id,name 是车系名称，target_id表示商城优惠Id,用于组装跳转到商城的链接
下面看看fx_activity.jsp接口是怎样实现的
<%@page language="java" contentType="text/html;charset=GBK" pageEncoding="GBK"%><%@ include file="/WEB-INF/jspf/import.jspf"%><% request.setCharacterEncoding("utf-8"); String price = request.getParameter("price"); String brandId = request.getParameter("brandId"); //查询活动车系库存 BaseConfig baseConfig = EnvUtils.getEnv().getBean(BaseConfig.class); String actId = (String)baseConfig.get("actId"); String data = HttpClientUtils.httpGet(SysConfig.BRAND_URI + "?aId=" + actId + "&price=" + price, "utf-8", true); //System.out.println("-------" + data); List<Map<String, Object>> resultList = new ArrayList<Map<String, Object>>(); Map<String, Boolean> brandMap = new HashMap<String, Boolean>(); if (StringUtils.isNotEmpty(data)) { JSONArray jsonArray = JSONArray.parseArray(data); if (jsonArray != null && jsonArray.size() > 0) { for (int i = 0 ; i < jsonArray.size(); i++) { try { JSONObject json = jsonArray.getJSONObject(i); if (json.getInteger("stockCount") <= 0) //库存<0不能显示 continue; //查品牌 if (brandId == null && brandMap.get(json.getString("manufacturerName")) == null) { Map<String, Object> map = new HashMap<String, Object>(); map.put("id", json.getInteger("manufacturerId")); map.put("name", json.getString("manufacturerName")); map.put("target_id", json.getInteger("id")); resultList.add(map); brandMap.put(json.getString("manufacturerName"), true); }else { //查某品牌下所有车系 String brandIdStr = json.getString("manufacturerId"); if (brandIdStr != null && brandIdStr.equals(brandId)) { Map<String, Object> map = new HashMap<String, Object>(); map.put("id", json.getInteger("serialGroupId")); map.put("name", json.getString("serialGroupgName")); map.put("target_id", json.getInteger("id")); resultList.add(map); } } }catch(Exception e) { e.printStackTrace(); } } } } request.setAttribute("resultList", resultList); %>{"list":[ <c:forEach var="o" items="${resultList }" varStatus="idx"> {id:${o.id}, name:"${o.name}", target_id:${o.target_id}} <c:if test="${!idx.last }">,</c:if> </c:forEach>]}
双十一活动开发技术总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。