如何避免在 js/ajax 脚本中硬编码应用程序上下文路径答案

【问题标题】：How to avoid hard-coding the application context path in js/ajax scripts如何避免在 js/ajax 脚本中硬编码应用程序上下文路径
【发布时间】：2013-09-09 11:54:59
【问题描述】：

我使用 Spring MVC 和 Javascript/ajax。 我的 ajax 脚本引用服务器端资源的方式存在问题。

假设我有两个页面需要通过 ajax 使用相同的服务器端资源：

第一页的网址是：

/myapp/advertisement/28/edit
/myapp/signup

说我的ajax脚本需要用到的服务器端资源是：

/myapp/geolocation/addressAutocomplete

到目前为止，我已在我的 ajax 脚本中硬编码应用程序上下文路径，即 /myapp。

如果我的应用程序上下文路径发生变化，我需要更新的内容遍布我的脚本。

有解决办法吗？

【问题讨论】：

标签： javascript jquery ajax spring-mvc

【解决方案1】：

在包含脚本的 HTML 页面中，您可以放置一个指向上下文的 HTML base 标记。查看How to get domain URL and application name?的答案

您可以在http://www.w3schools.com/tags/tag_base.asp 阅读有关base 标记的内容，其中指出The <base> tag specifies the base URL/target for all relative URLs in a document.

在决定是否使用此标签之前，可能值得阅读Is it recommended to use the <base> html tag?的答案

【讨论】：

【解决方案2】：

您可以使用$.ajaxPrefilter() 为所有 jQuery AJAX 请求添加上下文路径。

可以在页面的<script>元素中配置，其中上下文路径值可用（例如JSP中的${pageContext.request.contextPath}）。

【讨论】：

【解决方案3】：

我在使用外部 JS 文件中的 AJAX 请求的 JSP 页面中遇到了同样的问题，我通过在 JSP 中使用包含 contextPath 的隐藏字段解决了这个问题：

<input type="hidden" id="contextPath" value="<%=request.getContextPath()%>" readonly></input>

在JS文件中，获取隐藏字段的值：

var contextPath = $('#contextPath').val();

最后，通过连接上下文路径和相对 url 来进行请求调用，例如：

$.ajax({
        type: "GET",
        contentType : "application/json",
        dataType: 'json',
        url: contextPath + '/home/reporting',
        success: function(data) {
                    }
       });

希望对遇到同样问题的人有所帮助

【讨论】：