使用Ajax启用后退按钮

时间:2013-11-25 06:02:05

标签: java jquery jsp struts2 struts2-jquery

以下是我的index.jsp

<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<s:head/>
<sj:head/>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="validate.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<title>My Air - Home</title>
</head>
<body>
    <div id="MainPage">
        <jsp:include page="header.jsp"></jsp:include>
        <div id="mainContent">
        <jsp:include page="menubar.jsp"></jsp:include>
          <div id="mainContentTop">
            <div id="ContentLeft">
                <jsp:include page="search.jsp"></jsp:include>
            </div>
            <div id="contentRight">
                <jsp:include page="topdeals.jsp"></jsp:include>
            </div>
           </div>
        </div>
        <jsp:include page="footer.jsp"></jsp:include>
    </div>
</body>
</html>

以下是我的search.jsp

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>\
<s:form action="searchFlight" theme="css_xhtml" cssClass="form1small" name="searchFlightForm">
    <div class="searchHeadersmall">Search Flight</div>
    <div id="searchForm1">
        <s:actionerror/>
        <s:select list="#application.cityList" headerValue="--------Select--------" headerKey="select" name="searchFlightDetails.from" label="Leaving From"></s:select>
        <s:select list="#application.destlist" headerValue="---------Select-------" headerKey="select" name="searchFlightDetails.to" label="Going To"></s:select>
        <sj:datepicker id="date0" label="Date" name="searchFlightDetails.dateoftravel" readonly="true" minDate="0"/>
        <s:select list="#{'1':'1','2':'2','3':'3','4':'4','5':'5'}" headerValue="" headerKey="" name="searchFlightDetails.noofpassengers" label="No of tickets" style="width:50%; float:left"></s:select>
        <div class="inputsmall nobottombordersmall">
            <s:radio label="Type" name="searchFlightDetails.nonstop"
                list="#{'Y':'NonStop','N':'Normal'}"/>
        </div>
        <div id="submitdivid1">
            <sj:submit value="Show Flights" targets="mainContent"/>
        </div>
    </div>
</s:form> 

提交表单后,searchFlightSuccess.jsp div:

中会加载以下mainContent
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<s:if test="#session.username!=null">
    <jsp:include page="menubaruser.jsp"></jsp:include>
</s:if>
<s:if test="#session.username==null">
    <jsp:include page="menubar.jsp"></jsp:include>
</s:if>
<div id="searchHeaderHistory">Search Results</div>
<div class="CSSTableGenerator">
    <table>
        <colgroup>
            <col span="1" style="width: 5%;">
            <col span="1" style="width: 10%">
            <col span="1" style="width: 15%">
            <col span="1" style="width: 10%">
            <col span="1" style="width: 15%">
            <col span="1" style="width: 15%">
            <col span="1" style="width: 15%">
            <col span="1" style="width: 5%">
            <col span="1" style="width: 10%">
        </colgroup>
        <thead>
            <tr>
                <td colspan="9">From:<s:property
                        value="searchFlightDetails.from" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    To:<s:property value="searchFlightDetails.to" /></td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Flight ID</td>
                <td>Provider</td>
                <td>Departure Source</td>
                <td>Via</td>
                <td>Via Arrival</td>
                <td>Via Departure</td>
                <td>Destination Arrival</td>
                <td>Fare</td>
                <td></td>
            </tr>

            <s:iterator value="searchedFlightsList" var="flights">

                <tr>

                    <td align="center"><s:property
                            value="#flights.flightDetails.fid" /></td>
                    <td align="center"><s:property
                            value="#flights.flightDetails.providerDetails.pname" /></td>
                    <td align="center"><s:property value="#flights.sourcedepdate" />,<s:property
                            value="#flights.sourcedeptime" /> hrs</td>
                    <td align="center"><s:property
                            value="#flights.flightDetails.routeDetails.via" /></td>
                    <td align="center"><s:property value="#flights.viaarrdate" />,<s:property
                            value="#flights.viaarrtime" />hrs</td>
                    <td align="center"><s:property value="#flights.viadepdate" />,<s:property
                            value="#flights.viadeptime" />hrs</td>
                    <td align="center"><s:property value="#flights.destarrdate" />,<s:property
                            value="#flights.destarrtime" />hrs</td>
                    <td width="5%" align="center"><s:property
                            value="#flights.flightDetails.fares2d" /></td>
                    <td width="5%" align="center">
                        <s:form
                            action="passengerDetailsLink" method="get" theme="simple"
                            id="passengerDetailsLink_%{#flights.sid}">
                            <s:hidden value="%{#flights.sid}" name="sid" />
                            <s:hidden value="%{#flights.flightDetails.fares2d}" name="fare" />
                            <s:hidden value="%{searchFlightDetails.from}" name="from" />
                            <s:hidden value="%{searchFlightDetails.to}" name="to" />
                            <s:hidden value="%{searchFlightDetails.noofpassengers}"
                                name="passengers" />
                            <s:hidden value="1" name="flag" />
                            <sj:submit value="Book" targets="mainContent"
                                cssClass="orangebuttonsmall" />
                        </s:form></td>

                </tr>
            </s:iterator>
        </tbody>
    </table>
</div>

方案如下: 我在search.jsp中输入了一些值。我提交了表单,因此一些结果被加载到mainContent div中。由于表单是使用struts2 jQuery插件提交提交的,因此URL保持不变,因此浏览器后退按钮不起作用。如果我想回去,我该怎么办呢。 我读了一些哈希技术但是,我无法将其应用于此。

1 个答案:

答案 0 :(得分:0)

在Struts2的头标记中,jQuery使用ajaxhistory属性。将此属性设置为true为Ajax请求启用了浏览器历史记录。有关详细信息,请参阅header tag的wiki。