2

Ajax を集中的に使用してコンテンツをロードする Web サイトを作成しました。選択したページを AJAX にロードしたいのですが、同時に、ページ コンテンツ全体をリロードせずに URL も変更されます。どうすればそれを達成できますか？私はすでにグーグルで検索しましたが、私の検索では結果が得られませんでした。

このページがあるとしましょう：

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <sj:head />
</head>
<body>
    <h5>Struts Jquery Ajax Integration </h5>

    <div id="resultContent"></div>
    <noscript>Please Turn On Javascript to make the full use of this site</noscript>

    <h4>Choose A task</h4>
    <ul>
        <s:url value="views/ajaxvalidation.jsp" var="ajaxvalidation" />
        <li><sj:a targets="resultContent" href="%{ajaxvalidation}">Ajax Validation </sj:a></li>
    </ul>

    <div>
        <h6>Play A Music while You Navigate</h6>
        <audio src="x.mp3" controls>Your browser does not support the
            audio element.
        </audio>
    </div>
</body>
</html>

Ajax Validation リンクをクリックしました。ページをリロードしませんが、URL は次のようになります。

localhost:8090/AppName/ajaxvalidation.jsp

またはこれ：

 localhost:8090/AppName/ajaxvalidation.action

どうすればそのような目標を達成できますか?

このプラグインを使用していることに注意してください: struts2-jquery

4

2 に答える 2

3

History APIを使用する必要があります

window.history.pushState(data, title, url)

アップデート

ajax履歴機能のビルドを有効にするためにstruts2-jquery追加できることに注意してください。http://code.google.com/p/struts2-jquery/wiki/HeadTag#Attributesajaxhistory="true"を参照してください

<sj:head ajaxhistory="true" />

ただし、すべてのブラウザー バージョンでサポートされているわけではないことに注意してください。

于 2012-12-20T18:25:43.617 に答える
0

history.pushStateブラウザがサポートしている場合に使用できます(読み取り < IE10 )

var boolPushState  = false;
if (typeof history.pushState !== "undefined") {
        boolPushState = true;
}

if (boolPushState) {
    history.pushState(null, null, "URL");
}
于 2012-12-20T18:26:58.870 に答える