在Spring MVC的靜態資源文件中獲取對項目基本URL的引用

Question

我有一堆靜態javascript文件處理AJAX函數來查詢我的應用程序的各個部分，我部署了我的應用程序的多個版本，所以我可能有以下幾點：

https://www.myurl.com/projectName/ - production release
https://www.myurl.com/projectName_alpha/ - current alpha release
https://www.myurl.com/projectName_beta/ - current beta release
https://www.myurl.com/projectName_unstable/ - current development build

所以如果我有一個控制器“foo”我想要進行AJAX調用，我就不能硬編碼/projectName/foo作為URL（因為它總是指向生產版本）。 目前，我在每個視圖中注入一個腳本，該腳本將項目的基本URL作為全局變量：

<script type="text/javascript">
    // declare a global variable to hold the project's base URL
    var baseUrl = '<spring:url value="/" />';
</script>

然后在javascript文件中引用它：

var url = baseUrl + 'foo/';

它是功能性的，但是一個丑陋的解決方案，如果我可以避免它，我寧願不污染全局命名空間。 有沒有人對如何實施更好的解決方法有任何建議？

澄清一下：解決方案應該適用於任何類型的請求，無論是否是基於AJAX的 - 調用window.open ，設置<img>標簽的src屬性，以及對控制器進行AJAX調用都應該工作與解決方案。 它也應該適用，無論基本URL是什么或它有多少層，例如：

https://www.myurl.com/
https://www.myurl.com/projectName/
https://www.myurl.com/projectName_alpha/1.2.3/

應該都能正確檢測到。

Answer 1

我假設將所有js文件轉換為jsps並不是你想要的。

明顯的解決方案是使用模塊系統（例如require.js ）並將該值包裝在模塊中，

類似於jsp的東西：

define({
    baseUrl: '<c:url value="/" />'
});

然后其他模塊可以要求。

然而，這可能需要對代碼進行相當大的重組。

一個更簡單的選擇是創建一個包含在每個頁面中的后續jsp：

<script type="text/javascript">
    $(document).ready(function () {
        $(document).ajaxSend(function (ev, jqXHR, ajaxOptions) {
            var context = '${pageContext.request.contextPath}';
            ajaxOptions.url = context + '/' +  ajaxOptions.url;
        });
    });
</script>

它預先設置了使用jquery創建的每個ajax請求的url的上下文路徑。

只要您在ajax請求中使用相對於上下文的URL（即：以/開頭，沒有上下文名稱），這應該有效。

Answer 2

你能使用（ JSTL核心網址標簽 ）嗎？ 我們通常使用@RequestMapping(value="/foo")與var url = '<c:url value="/foo">'並且它不是上下文根敏感。 雖然如果需要重新設置腳本，它確實需要JSP級別的參數來更改上下文根。

Answer 3

您可以使用全局位置對象和正則表達式

如果您在alpha版本中， 請訪問https://www.myurl.com/projectName_alpha/resource.html

您將從window.location對象中檢索信息

window.location.protocol = "https"
window.location.host = "www.myurl.com"
window.location.pathname = "/projectName_alpha/resource.html"

如果要通過拆分或正則表達式從路徑名中提取上下文根，則可以使用該值來構建所需的不同URL。

如果要使用baseUrl屬性豐富location對象，則可以在頁面中輕松訪問它

window.location.baseUrl = window.location.pathname.split("/")[1];

你可以用這種方式建立你的網址：

var url = window.location.baseUrl + '/foo/';