问题一：返现卷读接口展示品牌与接口的二级联动效果,并能跳转到相应的商城页
下面是读取商城接口返回的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://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="">请选择品牌</option>
</select>
<select id="pSeriesNameBottom">
<option value="">请选择车系</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=‘‘>选择活动车系</option>");
$.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=‘" + 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=‘‘>选择活动品牌</option>");
$("#pSeriesNameBottom").html("<option value=‘‘>选择活动车系</option>");
$.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=‘" + 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>
]}
时间： 2024-08-04 10:31:27