【j2ee spring】45、巴巴运动网前台ajax应用

发布时间：2020-12-16 01:55:30 所属栏目：百科来源：网络整理

导读：巴巴运动网前台ajax应用文件目录结构添加功能模块 1、图文显示productlist_text.jsp %@ page language= "java" isELIgnored= "false" contentType= "text/html; charset=UTF-8" pageEncoding= "UTF-8" % %@ taglib uri= "/struts-tags" prefix= "s" % !DOC

巴巴运动网前台ajax应用

文件目录结构

添加功能模块

1、图文显示productlist_text.jsp

<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>${producttype.name} 巴巴运动网</title>    
    <link href="css/global/header01.css" rel="stylesheet" type="text/css" />
    <link href="css/product/list.css" rel="stylesheet" type="text/css" />   
    <link href="css/global/topsell.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="Keywords" content="${producttype.name}" />
    <META name="description" content="${producttype.note}" />
<SCRIPT type="text/javascript" src="js/xmlhttp.js"></SCRIPT>
<SCRIPT type="text/javascript" > function getTopSell(typeid) { var salespromotion = document.getElementById('salespromotion'); if(salespromotion && typeid!="") //判断是否存在 { salespromotion.innerHTML= "数据正在加载..."; //异步请求 send_request(function(value){ salespromotion.innerHTML=value;},"<s:url action='switch-topsell'/>?&typeid="+ typeid,true); } } function getViewHistory() { var viewHistoryUI = document.getElementById('viewHistory'); if(viewHistoryUI) { viewHistoryUI.innerHTML= "数据正在加载..."; send_request(function(value){ viewHistoryUI.innerHTML=value;},"<s:url action='switch-viewHistory'/>",true); } } function pageInit() //用来初始化页面 { getTopSell("${producttype.typeid}"); getViewHistory(); } </SCRIPT>
</head>

<body class="ProducTypeHome2" onload="javascript:pageInit()">
    <jsp:include page="/page/share/Head.jsp"/>
    <s:set name="out" value='' />  <!-- 这个是定义了一个变量 -->
    <s:iterator value="#request.types" var="type"> 
        <s:set name="out" var="out" value="#out+'&gt;&gt;'+#type.name+'</a>'" />
    </s:iterator>
    <div id="position">您现在的位置: <a href="/" name="linkHome">巴巴运动网</a> 
        <s:property value="#out" escapeHtml="false" />（<s:property value="#request.pageView.totalrecords" />个）
    </div>

    <!--页面左侧分类浏览部分-->
    <div class="browse_left">
         <div class="browse">
            <div class="browse_t">${producttype.name}</div>
                <h2><span class="gray">浏览下级分类</span></h2>
                <ul>
                    <s:iterator value="#request.producttype.childtypes" var="childtype">
                        <li class='bj_blue'> 
                            <a href="<s:url action="frontProductlist"/>?typeid=<s:property value="#childtype.typeid" />"><s:property value="#childtype.name" /></a>
                        </li>
                    </s:iterator>
                </ul>
         </div>
<DIV id="sy_biankuang">
        <DIV class="lanmu_font">最畅销${producttype.name}</DIV>
        <DIV style="PADDING-LEFT: 10px; COLOR: #333333" id="salespromotion">
        </DIV>
</DIV>
         <br/>
         <div class="browse">
              <div class="browse_t">您浏览过的商品</div>
              <ul id="viewHistory">
              </ul>
         </div>
    </div>
    <!--页面右侧分类列表部分开始-->
    <div class="browse_right">
         <div class="select_reorder">
              <div class="reorder_l">请选择排序方式： 
              <s:if test="%{'selldesc' == pf.sort}"><strong><em>销量多到少</em></strong></s:if>
              <s:if test="%{'selldesc' != pf.sort}">
                <a title='按销量降序' href="<s:url action="frontProductlist" />?sort=selldesc&
                                                    typeid=<s:property value="#parameters.typeid" />&
                                                    showstyle=<s:property value="#parameters.showstyle" />">销量多到少</a>
              </s:if>
              | 
              <s:if test="%{'sellpricedesc' == pf.sort}"><strong><em>价格高到低</em></strong></s:if>
              <s:if test="%{'sellpricedesc' != pf.sort}">
                <a title='按销量降序' href="<s:url action="frontProductlist" />?sort=sellpricedesc&
                                                    typeid=<s:property value="#parameters.typeid" />&
                                                    showstyle=<s:property value="#parameters.showstyle" />">价格高到低</a>
              </s:if>
              | 
              <s:if test="%{'sellpriceasc' == pf.sort}"><strong><em>价格低到低</em></strong></s:if>
              <s:if test="%{'sellpriceasc' != pf.sort}">
                <a title='价格低到高' href="<s:url action="frontProductlist" />?sort=sellpriceasc&
                                                    typeid=<s:property value="#parameters.typeid" />&
                                                    showstyle=<s:property value="#parameters.showstyle" />">价格低到高</a>
              </s:if>
              | 
              <s:if test="%{pf.sort == ''}"><strong><em>最近上架时间</em></strong></s:if>
              <s:if test="%{pf.sort != ''}">
                <a title='价格低到高' href="<s:url action="frontProductlist" />?sort=&
                                                    typeid=<s:property value="#parameters.typeid" />&
                                                    showstyle=<s:property value="#parameters.showstyle" />">最近上架时间</a>
              </s:if> 
         </div>

              <div class="reorder_r">显示方式：
            <%-- <s:if test="showstyle=='imagetext'"> test </s:if> --%>
                  <s:if test="showstyle=='imagetext'">
                    <strong><em>图文版</em></strong>
                  </s:if>
                  <s:if test="showstyle!='imagetext'">
                    <a href="<s:url action="frontProductlist"/>?sort=<s:property value="#request.sort" />&
                                typeid=<s:property value="#parameters.typeid" />&
                                sex=<s:property value="#parameters.sex" />&
                                brandid=<s:property value="#brand.code" />&
                                showstyle=imagetext">
                        图文版
                    </a>
                  </s:if> |
                  <s:if test="showstyle!='image'">
                    <a href="<s:url action="frontProductlist"/>?sort=<s:property value="#request.sort" />&
                                typeid=<s:property value="#parameters.typeid" />&
                                sex=<s:property value="#parameters.sex" />&
                                brandid=<s:property value="#brand.code" />&
                                showstyle=image">
                        图片版
                    </a>
                  </s:if>
                  <s:if test="showstyle=='image'">
                    <strong><em>图片版</em></strong>
                  </s:if>
              </div>
            <div class="emptybox"></div>
             <div class="brand">
                <div class="FindByHint">按<strong>品牌</strong>选择：</div>
                <ul class="CategoryListTableLevel1">
                    <s:iterator value="#request.brands" var="brand"> 
                        <li>
                            <a href="<s:url action="frontProductlist" />?sort=<s:property value="#request.sort" />
                                                &brandid=<s:property value="#brand.code" />
                                                &typeid=<s:property value="#parameters.typeid" />
                                                &sex=<s:property value="#parameters.sex" />&
                                                showstyle=<s:property value="#parameters.showstyle" />">
                                                <s:property value="#brand.name" />
                            </a>
                        </li>
                    </s:iterator>
                </ul>
             </div>
             <div class="SubCategoryBox">
                <div class="FindByHint">按<strong>男女款</strong>选择：</div>
                <ul class="CategoryListTableLevel1">
                <li>
                    <a href="<s:url action="frontProductlist"/>?sort=sellpriceasc&
                                typeid=<s:property value="#parameters.typeid" />&
                                sex=MAN&brandid=<s:property value="#brand.code" />&
                                showstyle=<s:property value="#parameters.showstyle" />">男款</a>
                </li>
                <li>
                    <a href="<s:url action="frontProductlist"/>?sort=sellpriceasc&
                                typeid=<s:property value="#parameters.typeid" />&
                                sex=WOMEN&brandid=<s:property value="#brand.code" />&
                                showstyle=<s:property value="#parameters.showstyle" />">女款</a>
                </li>
                <li>
                    <a href="<s:url action="frontProductlist"/>?sort=sellpriceasc&typeid=<s:property value="#parameters.typeid" />&
                                sex=NONE&brandid=<s:property value="#brand.code" />&
                                showstyle=<s:property value="#parameters.showstyle" />">男女均可</a>
                </li>
                <li>
                    <a class="red" href="<s:url action="frontProductlist"/>?sort=sellpriceasc&typeid=<s:property value="#parameters.typeid" />&showstyle=<s:property value="#parameters.showstyle" />">全部</a>
                </li>
                </ul>
             </div>
        </div>
         <div id="divNaviTop" class="number"> 
              <div class="number_l">以下<span class='number_white'><s:property value="#request.pageView.totalrecords" /></span>条结果按<span class="number_white">
                <s:if test="%{'selldesc' == #request.sort}">
                    销量多到少
                </s:if>
                <s:elseif test="%{'sellpricedesc' == #request.sort}">
                    价格高到低
                </s:elseif>
                <s:elseif test="%{'sellpriceasc' == #request.sort}">
                    价格低到高
                </s:elseif>
                <s:else>
                    最近上架时间
                </s:else>
              </span>
                 排列，显示方式是
                  <span class="number_white"><s:if test="#parameters.showstyle=='imagetext'">图文版</s:if><s:if test="#parameters.showstyle=='image'">图片版</s:if>
                  </span>　
                  每页显示
                <span class="number_white">${pageView.maxresult}</span>
                  条
              </div>
              <div class="turnpage">
                <div><em>第${pageView.currentpage}页</em></div>
              </div>
         </div>

    <div class='goods_pic'>
<!---------------------------LOOP START------------------------------>
<s:iterator value="#request.pageView.records" var="entry">  
    <div class="goodslist">   
        <div class="goods" style="cursor:hand;background:url(<s:iterator value="#entry.styles" var="pic"><s:property value="#pic.image140FullPath" /> </s:iterator>) center center no-repeat">
            <a href="<s:url action="viewproduct" />?productid=<s:property value="#entry.id" />" target="_blank">
                <img src="images/global/product_blank.gif" alt="<s:property value="#entry.name" />" width="140" height="168"  border="0"/>
             </a>
         </div>
        <div class="goods_right">
            <h2>
                <a href="<s:url action="viewproduct" />?productid=<s:property value="#entry.id" />" target="_blank" title="<s:property value="#entry.name" />"><s:property value="#entry.name" /></a>
            </h2>
            <div class="message">
                <ul>
                    <s:if test="#entry.brand">
                        <li>品牌：<s:property value="#entry.brand.name" /> </li>
                    </s:if>
                </ul>
            </div>
            <div class="content">
                <s:property value="#entry.description" />
            </div>
            <div class="message_bottom">
                <div class="save">
                    <s>￥<s:property value="#entry.marketprice" /></s>　
                    <strong>
                        <em>￥<s:property value="#entry.sellprice" /></em>
                    </strong>　
                    节省：<s:property value="#entry.savedPrice" />
                </div>
                <div class="buy">
                    <a href="<s:url action="viewproduct" />?productid=<s:property value="#entry.id" />">
                        <img src='images/sale.gif' width='84' height='24' border='0' class='a_1' />
                    </a>
                </div>
            </div>
        </div>
        <div class='emptybox'></div>
    </div>
</s:iterator>
<!----------------------LOOP END------------------------------->
        <div class='emptybox'></div>
    </div>
         <div id="divNaviBottom" class="page_number">
         <div class="turnpage turnpage_bottom"> 
        <s:iterator begin="%{#request.pageView.pageindex.startpage}" end="%{#request.pageView.pageindex.endpage}" var="index">
            <s:if test="#request.pageView.currentpage == #index"><div class='red'>第${index}页　</div></s:if>
            <s:else>
                <div class="page">
                    <a href="<s:url action="frontProductlist" />?page=${index }&
                                                typeid=<s:property value="#parameters.typeid" />&
                                                sort=<s:property value="#parameters.sort" />&
                                                brandid=<s:property value="#brand.code" />&
                                                sex=<s:property value="#parameters.sex" />&
                                                showstyle=<s:property value="#parameters.showstyle" />" onclick="topage(${index })" class="a03">第${index}页　</a>
                </div>
            </s:else>
        </s:iterator>
        <div>&nbsp;&nbsp;</div>
        跳转到第
        <select name="selectPage" class="kuang" onchange="javascript:topage(this.value)">
            <s:iterator begin="1" end="#request.pageView.totalpage" var="index"> 
                <option value="${index }" &amp;amp;amp;lt;s:if test="%{#request.pageView.currentpage == #index}" >selected="selected"</s:if> >
                    <s:property value="#index" />
                </option>
            </s:iterator>
        </Select> 
        页
        <input type="hidden" id="typeid" value="<s:property value="#parameters.typeid" />" />
        <input type="hidden" id="sort" value="<s:property value="#parameters.sort" />" />
        <input type="hidden" id="brandid" value="<s:property value="#brand.code" />" />
        <input type="hidden" id="sex" value="<s:property value="#parameters.sex" />" />
        <input type="hidden" id="showstyle" value="<s:property value="#parameters.showstyle" />" />
        <SCRIPT type="text/javascript"> function topage(pagenum) { var typeid=document.getElementById("typeid").value; var sort=document.getElementById("sort").value; var brandid=document.getElementById("brandid").value; var sex=document.getElementById("sex").value; var showstyle=document.getElementById("showstyle").value; window.location.href="<s:url action='frontProductlist' />?sort=" + sort +"&page="+ pagenum +"&typeid="+ typeid + "&brandid=" + brandid + "&sex=" + sex + "&showstyle=" + showstyle; } </SCRIPT>
         </div>
         </div>
    </div>
    <jsp:include page="/page/share/Foot.jsp" />
</body>
</html>

2、前台产品显示productview.jsp

<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/global/header01.css" rel="stylesheet" type="text/css" />
<link href="css/product/product.css" rel="stylesheet" type="text/css" />
<link href="css/global/topcommend.css" rel="stylesheet" type="text/css" />
<SCRIPT type="text/javascript" src="js/FoshanRen.js" ></SCRIPT>
<SCRIPT type="text/javascript" src="js/xmlhttp.js" ></SCRIPT>
<title>${product.name}-巴巴运动网</title>
<meta name="Keywords" content="${product.name}" />
<META name="description" content="" /> 
<SCRIPT type="text/javascript"> <!-- //初始化界面 function InitPage() { giveGood(); historyaccess(); } //用ajax进行一步提交,为了显示浏览历史 function historyaccess() { var historyaccess = document.getElementById("historyaccess"); //获取要显示的地方的标签id名 if(historyaccess) //只要获取的标签存在，那么我们就进行一步请求 { historyaccess.innerHTML="数据正在加载..."; //开始异步请求 send_request( function(value) //异步请求要执行的操作 { historyaccess.innerHTML=value; },"<s:url action='switch-viewHistory' />",//异步请求的路径 true //是否返回数据 ); } } //ajax进行精品推荐的功能 function giveGood() { var form = document.getElementById("cart"); var typeid = form.typeid.value; var giveGood = document.getElementById("giveGood"); //获取要进行异步请求的对象 if(giveGood && typeid!="") //只要获取的标签存在，那么我们就进行一步请求 { giveGood.innerHTML="卧槽！！数据被我吃了！！！"; //开始异步请求 send_request( function(value) //异步请求的要执行的操作函数 { giveGood.innerHTML=value; },true ); } } function styleEvent(styleid) { var productImage = document.getElementById("productImage_"+styleid); if(productImage) { var main_image = document.getElementById("main_image"); main_image.style.background="url("+productImage.value+") center center no-repeat"; } } function bigImageBrowse() { var form = document.getElementById("cart"); var typeid = form.typeid.value; var productPrototypeImage = document.getElementById('productPrototypeImage_'+ typeid); if(productPrototypeImage) { var path = "<s:url action="switch-showimage" />?path="+ productPrototypeImage.value; window.open (path,"显示图片"); } } //--> </SCRIPT>
</head>
<body onload="javascript:InitPage()">

    <jsp:include page="/page/share/Head.jsp"/>
    <div id="ContentBody"><!-- 页面主体 --> 
        <s:set name="out" value='' />  <!-- 这个是定义了一个变量 -->
        <s:iterator value="#request.types" var="type"> 
            <s:set name="out" var="out" value="#out+'&gt;&gt;'+#type.name+'</a>'" />
        </s:iterator>
         <div id="position"> 您现在的位置：<a href="/" name="linkHome">信管1201</a> 
             <span id="uc_cat_spnPath">
                 <s:property value="#out" escapeHtml="false" />
             </span>
         </div>
     <div class="browse_left"><!-- 页面主体 左边 --> 
            <!-- 浏览过的商品 -->
         <div class="browse">
              <div class="browse_t">您浏览过的商品</div>
              <ul id="historyaccess"></ul>
         </div>
        <!--精品推荐 start --> 
        <DIV id="topcommend" align="left">
               <DIV id="newtop"><IMG height="13" src="images/global/sy2.gif" width="192" /></DIV>
               <DIV id="newlist">
              <DIV id="newmore">
                <DIV class="title">精品推荐</DIV>
              </DIV>
                <span id="commenddetail">
                </span>
                <ul id="giveGood"></ul>
            </DIV>
        </DIV>
    </div><!-- 页面主体 左边end -->

    <div id="Right" ><!-- 页面主体 右边 -->
    <form action="##" method="post" name="cart" id="cart">
        <INPUT type="hidden" name="productid" value="<s:property value="#request.product.id" />" />
        <div id="browse_left">
            <s:set name="currentimage" />
            <s:set var="imagecount" value="0"/>
            <s:iterator value="#request.product.styles" var="style" >
                <s:if test="#style.visible==true">
                    <s:set name="currentimage" value="#style" />
                    <s:set name="imagecount" var="imagecount" value="#imagecount+1" />
                </s:if>
            </s:iterator>
            <div class="right_left">
                <div id="main_image" onclick="JavaScript:bigImageBrowse(<s:property value="#currentimage.id" />)" 
                            style="cursor:hand;background:url(<s:property value="#currentimage.image140FullPath" />) center center no-repeat">
                    <img src="images/global/product_blank.gif" width="200" height="240"/>
                </div>
                <!-- 查看大图 -->
                <img src="images/global/zoom+.gif" onclick="JavaScript:bigImageBrowse(<s:property value="#currentimage.id" />)" style="cursor:hand;"/>
            </div>

            <div class="right_right">                                   
                <div class="right_title">
                    <b>${product.name}</b>
                </div>
                <div class="right_desc">
                    <ul>
                        <li class="li2">商品编号：A${product.id}<font color="#CC0000">（电话订购专用）</font></li>
                        <s:if test="#request.product.brand!=null"><li>品牌：${product.brand.name} </li>   </s:if>                                                                                                                                     
                    </ul>
                </div>
                <div class="right_desc">
                    <s:if test="#imagecount==1">
                        <INPUT type="hidden" name="typeid" value="<s:property value="#currentimage.id" />" />
                        <li>颜色：<s:property value="#currentimage.name" /></li>
                        <INPUT type="hidden" id="productImage_<s:property value="#currentimage.id" />" value="<s:property value="#currentimage.image140FullPath" />" />
                        <INPUT type="hidden" id="productPrototypeImage_<s:property value="#currentimage.id" />" value="<s:property value="#currentimage.imageFullPath" />" />
                     </s:if>
                    <s:if test="#imagecount>1">
                        <INPUT type="hidden" name="typeid" value="<s:property value="#currentimage.id" />" />
                        <img src="images/global/init.gif" width="0" height="0" />
                        <li>颜色：
                            <select name="styleid" onchange="javascript:styleEvent(this.value)">
                                <s:iterator value="#request.product.styles" var="style">
                                    <s:if test="#style.visible==true">
                                        <option value="<s:property value="#style.id" />" <s:if test="#style.id == #currentimage.id">selected="selected"</s:if>> 
                                            <s:property value="#style.name" />
                                        </option>
                                    </s:if>
                                </s:iterator>
                            </SELECT>
                        </li>
                        <s:iterator value="#request.product.styles" var="style">
                            <s:if test="#style.visible==true">
                                <INPUT type="hidden" id="productImage_<s:property value="#style.id" />" value="<s:property value="#style.image140FullPath" />" />
                                <INPUT type="hidden" id="productPrototypeImage_<s:property value="#style.id" />" value="<s:property value="#style.imageFullPath" />" />
                            </s:if>
                        </s:iterator>
                     </s:if>
                </div>
                <ul>
                    <li>市场价：
                        <s>${product.marketprice}</s> 元 
                        <font color='#ff6f02'>本站价：
                            <b>${product.sellprice} 元</b>
                        </font> 节省：<font color='#ff6f02'>${product.savedPrice }</font> 元                                       
                    </li>
                    <li class="right_img">
                        <INPUT type="image" src="images/global/sale.gif" />
                    </li>
                    <li class="guopiprice">[ 
                        <IMG src="images/global/2j4.gif" border="0" />&nbsp;
                        <A href="http://www.babasport.com/cache/news/6/9.shtml" target="_blank">配送说明</A> 
                        ]&nbsp;&nbsp;&nbsp;&nbsp;[ 
                        <IMG src="images/global/2j4.gif" border="0" />&nbsp;
                        <A href="http://www.babasport.com/cache/news/4/24.shtml" target="_blank">付款方式</A> 
                    ]</li>
                </ul>                                   
            </div>
        </div>
        <div id="browse_right">
            <div id="sy_biankuang">
                <div class="sy_xinpintuijian_font">本站尚未开张</div>
                <div class="sy_dianhua" style="line-height:150%">
                    <font color="#FF0000">
                    全国：010-6466 3070
                    </font>
                    <br>MSN在线客服：babasport@sohu.com</br> 
                    <font color="#3A8FAF">QQ在线客服：523429525</font>
                </div>
            </div>
        </div>
    </form>
    <div class='right_blank'></div>
    <div class='right_title1'>商品说明</div>
    <div class='right_content'>${product.description}</div>
    </div><!-- 页面主体 右边 end -->
    </div><!-- 页面主体 end -->
    <jsp:include page="/page/share/Foot.jsp" />
</body>
</html>

3、前台显示代码

/** * 功能：这个是前台产品展示的控制器 * 时间：2015年6月3日09:46:50 * 文件：FrontProductAction.java * 作者：cutter_point */
package com.cutter_point.web.action.product;

import java.util.ArrayList;
import java.util.HashSet;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Set;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.interceptor.ServletRequestAware;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import com.cutter_point.bean.PageView;
import com.cutter_point.bean.QueryResult;
import com.cutter_point.bean.product.ProductInfo;
import com.cutter_point.bean.product.ProductStyle;
import com.cutter_point.bean.product.ProductType;
import com.cutter_point.bean.product.Sex;
import com.cutter_point.service.product.ProductInfoService;
import com.cutter_point.service.product.ProductTypeService;
import com.cutter_point.utils.WebUtil;
import com.cutter_point.web.formbean.product.FrontProductForm;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;

@Controller
@Scope("prototype")     //这个表示每次访问的时候都会有一个新的对象创建
public class FrontProductAction extends ActionSupport implements ServletRequestAware,ModelDriven<FrontProductForm>
{
    private static final long serialVersionUID = -568904658537583015L;
    @Resource
    private ProductInfoService productInfoService;  //业务注入
    @Resource
    private ProductTypeService productTypeService;  //业务注入
    private HttpServletRequest request;
    private FrontProductForm pf;    //一个表单bean

    @Override
    public String execute() throws Exception 
    {
        PageView<ProductInfo> pageview = new PageView<ProductInfo>(2,pf.getPage());
        pageview.setPagecode(20);   //这个是为了设置页码数
        int firstindex = (pageview.getCurrentpage() - 1) * pageview.getMaxresult(); //得到从哪个开始索引的值
        //按什么排序的选择
        LinkedHashMap<String,String> orderby = this.buildOrder(pf.getSort());  //获取到相应的排序规则
        //执行的SQL语句
        StringBuilder sql = new StringBuilder(" o.visible=?");  //用来组装的SQL语句
        List<Object> params = new ArrayList<Object>();      //用来给?赋值的参数列表
        params.add(true);   //只有显示为产品上架的才会被显示

        //判断是不是有typeid
        if(pf.getTypeid() != null)
        {
            sql.append(" and o.typeid=?");
            params.add(pf.getTypeid()); //查询出相应的类别id号作为条件
        }

        //这里先判断一下品牌的id是不是为空
        if(pf.getBrandid() != null && !"".equals(pf.getBrandid().trim()))
        {
            //这里组装一条语句
            sql.append(" and o.brandid=?");
            params.add(pf.getBrandid());    //查询出相应的品牌id号作为条件
        }

        //判断选择的性别要求
        if(pf.getSex() != null)
        {
            //获取性别属性
            String sex = pf.getSex().trim();
            if("NONE".equalsIgnoreCase(sex) || "MAN".equalsIgnoreCase(sex) || "WOMEN".equalsIgnoreCase(sex))
            {
                sql.append(" and o.sexrequest=?");
                params.add(Sex.valueOf(sex).toString());    //根据String获取相应的值
            }
        }

        //获取所有的子类，包括子类的子类
        List<Integer> typeids = new ArrayList<Integer>();
        //首先把顶级要查询的父类放进去
        //判断是不是有typeid
        if(pf.getTypeid() != null)
        {
            typeids.add(pf.getTypeid());
            this.getTypeids(typeids,new Integer[]{pf.getTypeid()});
            //吧查询出来的所有类型号查询出来
            StringBuilder sb = new StringBuilder();
            for(int i = 0; i < typeids.size(); ++i)
            {
                sb.append("?,");
            }
            //去掉逗号
            sb.deleteCharAt(sb.length() - 1);
            sql.append("and o.typeid in (" + sb.toString() + ")");
            params.addAll(typeids);  //传入参数
        }


        QueryResult<ProductInfo> qr = null;
        //根据相应的条件取得相应的数据
        qr = productInfoService.getScrollData(ProductInfo.class,firstindex,pageview.getMaxresult(),sql.toString(),params.toArray(),orderby);
        pageview.setQueryResult(qr);

        //显示相应产品的样式的时候，我们要显示一个
        for(ProductInfo product : pageview.getRecords())
        {
            Set<ProductStyle> styles = new HashSet<ProductStyle>();
            //然后把取出来的产品的样式一个一个地取出来
            for(ProductStyle style : product.getStyles())
            {
                //取出一个可以上架的样式就跳出循环
                if(style.getVisible())
                {
                    styles.add(style); //给要显示的样式添加一个对象
                    break;
                }
            }
            product.setStyles(styles); //每个产品的样式给设置出来
            //这里处理产品的描述,取出html标签
            product.setDescription(WebUtil.HtmltoText(product.getDescription()));
        }


        request.setAttribute("sort",pf.getSort());
        request.setAttribute("pageView",pageview);
        if(pf.getTypeid() != null)
        {
            Integer[] ids = new Integer[typeids.size()];    //吧类型转换为数组
            for(int i = 0; i < typeids.size(); ++i)
            {
                ids[i] = typeids.get(i);
            }
            request.setAttribute("brands",productInfoService.getBrandsByProductTypeid(ids));   //查询出相应的品牌
            ProductType type = productTypeService.find(ProductType.class,pf.getTypeid());  //查找到当前的类别
            //页面循环显示导航路径
            List<ProductType> types = new ArrayList<ProductType>();
            types.add(type);    //吧这个类别添加到这个路径中
            ProductType parenttype = type.getParent();  //获取父类类型
            //吧所有的父类，父类的父类的父类。。。全部放到list作为路径
            while(parenttype  != null)
            {
                types.add(parenttype);
                parenttype = parenttype.getParent();
            }
            request.setAttribute("producttype",type);  //查询出相应的当前类别
            request.setAttribute("types",types);   //查询出相应的序列
        }
        return this.getView(pf.getShowstyle());
    }

    /** * 判定显示的类型是图文版还是图片版 * @param showstyle * @return */
    public String getView(String showstyle)
    {
        if("imagetext".equalsIgnoreCase(showstyle))
        {
            //如果是图文版的话
            return "list_imagetext";
        }
        else
        {
            return "list_image";
        }
    }

    /** * 查询出所有的子类id(子类的子类全部获取) * @param outtypeids 这个是查询出来的所有的有关id号 * @param typeids 父类id * @return */
    public void getTypeids(List<Integer> outtypeids,Integer[] typeids)
    {
        //首先查出父类id的所有子类id
        List<Integer> subtypeids = productTypeService.getSubTypeid(typeids);
// //吧自身也包含进去
// List<Integer> typeidss = Arrays.asList(typeids);
// outtypeids.addAll(typeidss); //吧自己也加进去
        //只要查出来的子类id号不为空说明子类可能还有子类，一直把最后一层之类查询不出来为止
        if(subtypeids != null && subtypeids.size() > 0)
        {
            //吧查询出来的子类放出到参数中存放
            outtypeids.addAll(subtypeids);
            //然后把查询出来的子类当做父类进行查询
            Integer[] ids = new Integer[subtypeids.size()];
            for(int i = 0; i < subtypeids.size(); ++i)
            {
                ids[i] = Integer.valueOf(subtypeids.get(i).toString());
            }
            getTypeids(outtypeids,ids);    //吧List转化为数组
        }
    }

    /** * 组装排序规则 * @param orderfiled * @return */
    private LinkedHashMap<String,String> buildOrder(String orderfiled)
    {
        LinkedHashMap<String,String> orderby = new LinkedHashMap<String,String>();
        //判断字符串前面的 是不是以字符串orderfiled结尾.
        if("selldesc".equals(orderfiled))
        {
            orderby.put("sellcount","desc");   //这个是以销量来排序
        }
        else if("sellpricedesc".equals(orderfiled)) //这个是以销售价格的高低来排序
        {
            orderby.put("sellprice","desc");
        }
        else if("sellpriceasc".equals(orderfiled)) //这个是以价格的低高来排序
        {
            orderby.put("sellprice","asc");
        }
        else    //以产品的上架时间来判断
        {
            orderby.put("createdate","desc");
        }
        return orderby; //返回相应的排序列表
    }


    public ProductInfoService getProductInfoService() {
        return productInfoService;
    }


    public void setProductInfoService(ProductInfoService productInfoService) {
        this.productInfoService = productInfoService;
    }


    public FrontProductForm getPf() {
        return pf;
    }


    public void setPf(FrontProductForm pf) {
        this.pf = pf;
    }


    @Override
    public FrontProductForm getModel() 
    {
        //从页面获取表单值
        if(pf == null)
            pf = new FrontProductForm();

        return pf;
    }

    @Override
    public void setServletRequest(HttpServletRequest arg0) 
    {
        this.request = arg0;
    }

}

4、显示大图，显示销售最多的，显示浏览历史

showimage.jsp

<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>显示图片</title>
</head>
<body>
<center><img src="${param.path}"/></center>
</body>
</html>

topsell.jsp

<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="/struts-tags" prefix="s" %>
<UL>
    <s:iterator value="#request.topsellproducts" var="topsellproduct" status="statu">
        <li class="bx"><s:property value="#statu.count"/>.<a href="<s:url action="viewproduct" />?productid=<s:property value="#topsellproduct.id" />" target="_blank"><s:property value="#topsellproduct.name"/></a></li>
    </s:iterator>
</UL>

viewHistory.jsp

<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="/struts-tags" prefix="s" %>
    <s:iterator value="#request.viewHistory" var="vireproduct" status="statu">
        <li class="bj_blue"> 
            <a href="<s:url action="viewproduct" />?productid=<s:property value="#vireproduct.id" />" target="_blank" title="<s:property value="#vireproduct.name" />"><s:property value="#vireproduct.name" /></a>
        </li>
    </s:iterator>

前台销售量和浏览历史代码实现

/** * 功能：这个是专门为了显示产品的控制器 * 时间：2015年6月4日19:20:20 * 文件：ViewProductAction.java * 作者：cutter_point */
package com.cutter_point.web.action.product;

import java.util.ArrayList;
import java.util.LinkedList;
import java.util.List;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;
import org.apache.struts2.interceptor.ServletRequestAware;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import com.cutter_point.bean.product.ProductInfo;
import com.cutter_point.bean.product.ProductType;
import com.cutter_point.service.product.ProductInfoService;
import com.cutter_point.utils.WebUtil;
import com.cutter_point.web.formbean.product.FrontProductForm;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;

@Controller
@Scope("prototype")
public class ViewProductAction extends ActionSupport implements ServletRequestAware,ModelDriven<FrontProductForm>
{
    private static final long serialVersionUID = -886191288027224488L;
    @Resource
    private ProductInfoService productInfoService;  //业务注入
    private HttpServletRequest request;
    private FrontProductForm pf;    //一个表单bean


    @Override
    public String execute() throws Exception 
    {
        //通过页面的传值得到商品的id
        ProductInfo product = productInfoService.find(ProductInfo.class,pf.getProductid());
        HttpServletResponse response = ServletActionContext.getResponse();
        if(product == null)
        {
            request.setAttribute("message","获取不到产品");
            request.setAttribute("urladdress","/");
            return "message";
        }
        //获取到cookie,存放30天，创建一个cookie
        WebUtil.addCookie(response,"productViewHistory",this.buildViewHistory(pf.getProductid()),30*24*60*60);
        List<ProductType> types = new ArrayList<ProductType>();
        ProductType parent = product.getType(); //获取父类产品类别
        while(parent != null)
        {
            //吧类别
            types.add(parent);  //吧类别添加到一起
            parent = parent.getParent();    //得到父类,然后在吧父类放到类型里面去
        }
        request.setAttribute("types",types);
        request.setAttribute("product",product);
        return "product";
    }

    /** * 这个方法是为了获取到相应cookie的值 * @param currentProductId * @return */
    public String buildViewHistory(Integer currentProductId)
    {
        //获取到相应的cookie的值
        //1.如果当前浏览的id意见在浏览历史里面了，我们把它要移动到最前面
        //2.如果浏览历史达到了10个产品，我们需要把最先被浏览的产品id号删除掉
        String cookieValue = WebUtil.getCookieByName(request,"productViewHistory");
        LinkedList<Integer> productids = new LinkedList<Integer>();
        //这个里面是为了处理以前浏览过的东西的元素数据
        if(cookieValue != null && !"".equals(cookieValue.trim()))
        {
            String[] ids = cookieValue.split("-");  //分割cookie的值
            //吧分割之后的数据存放到一个list里面
            //吧数据一个一个地加进去
            for(String id : ids)
            {
                //吧数据添加到list里面，这个里面存放所有的浏览历史记录
                productids.offer(new Integer(id.trim()));
            }
            if(productids.contains(currentProductId)) //如果list里面存在当前的产品id号的话
            {
                //我们先把他删除掉
                productids.remove(currentProductId);
            }
            //如果历史记录以及超过了10个，那么就把以前的那个去掉
            if(productids.size() >= 10)
            {
                productids.poll();
            }
        }
        //然后再加进来
        productids.add(currentProductId);
        //吧数组里面的额数据转换为cookie里面的数据类型
        StringBuilder outcookie = new StringBuilder();
        for(Integer id : productids)
        {
            outcookie.append(id).append("-");
        }
        outcookie.deleteCharAt(outcookie.length() - 1);
        return outcookie.toString();
    }

    @Override
    public void setServletRequest(HttpServletRequest arg0) 
    {
        this.request = arg0;
    }

    @Override
    public FrontProductForm getModel() 
    {
        //从页面获取表单值
        if(pf == null)
            pf = new FrontProductForm();

        return pf;
    }

    public FrontProductForm getPf() {
        return pf;
    }

    public void setPf(FrontProductForm pf) {
        this.pf = pf;
    }
}

效果显示

总结：

运用ajax主要的一点就是异步展示的作用，还有其他就是调用JS想后台传递相应的数据，然后其余的操作和一般的后台请求没什么差别

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!