Question

我创建了一个集中使用Ajax加载其内容的网站。我希望我选择的页面加载到AJAX上，但同时URL也会更改而不重新加载整个页面内容。我怎么做到这一点？我已经google了，但我的搜索没有产生任何结果。

假设我有这个页面：

<%@ 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验证链接。它不会重新加载页面，但是网址会是这样的：

localhost:8090/AppName/ajaxvalidation.jsp

或者这个：

 localhost:8090/AppName/ajaxvalidation.action

我如何实现这样的目标？

请注意，我使用的是此插件：struts2-jquery

Answer 1

您需要使用History API

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

<强>更新

注意到您使用struts2-jquery，您可以添加ajaxhistory="true"以启用ajax历史记录功能中的内置功能。见http://code.google.com/p/struts2-jquery/wiki/HeadTag#Attributes

<sj:head ajaxhistory="true" />

请注意，并非所有浏览器版本都支持它。

Answer 2

如果浏览器支持（read < IE10）

，您可以使用history.pushState

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

if (boolPushState) {
    history.pushState(null, null, "URL");
}

在发出Ajax请求时如何更改地址栏？

2 个答案: