jQuery AJAX URL 不是亲戚

Question

我遇到了与 this 问题中所述相同的问题。在 MVC5 单页应用程序中，我的所有 AJAX 请求如下所示：

$.ajax({
       type: 'GET',
       url: 'ControllerName/MethodName',
       data: {foo : 'bar'},
       dataType: 'json',
       cache: false,
       })

如果我在我的应用程序的首页上，其中 URL 将是：

http://localhost:62989/

此 AJAX 方法将调用：

http://localhost:62989/ControllerName/MethodName

但是，当我在不同的页面上（有单元测试）时，例如：

http://localhost:62989/Home/UnitTests

此 AJAX 方法将调用：

http://localhost:62989/Home/ControllerName/MethodName

这是行不通的。将 'ControllerName/MethodName' 替换为：

'@Url.Action("MethodName", "ControllerName")'

对我不起作用。在 Firebug 中显示为：

GET http://localhost:62989/Home/@Url.Action(%22MethodName%20%22ControllerName%22)

并使用评论中的答案，即：

window.location.pathname + 'ControllerName/MethodName'

也不行。我做错了什么？

Answer 1

您不能在外部 javascript 文件中使用 @Url.Action("MethodName", "ControllerName")。这仅适用于 Razor 视图。因此，例如在您的 Razor 视图中，您可以设置一个 javascript 变量：

<script type="text/javascript">
    var myUrl = '@Url.Action("MethodName", "ControllerName")';
</script>

您可以在外部 js 中使用：

$.ajax({
   type: 'GET',
   url: myUrl,
   data: {foo : 'bar'},
   dataType: 'json',
   cache: false,
});

显然，这很少是必要的，因为您在现有 DOM 元素（例如 HTML 表单或锚点）的某些事件的回调中编写了那些 AJAX 请求。因此，您已经在 DOM 元素中获得了有关 url 的所有必要信息。

假设您不引人注意地AJAX化锚元素：

@Html.ActionLink("click me", "MethodName", "ControllerName", new { foo = "bar" }, new { id = "myLink" })

所以你已经在这个锚点中有一个合适的 url，你可以 AJAXify:

$('#myLink').click(function() {
    $.ajax({
       type: 'GET',
       url: this.href,
       dataType: 'json',
       cache: false,
    });
    return false;
});

请注意我是如何使用 this.href 从锚点中提取正确的 url 的。对于可以订阅 .submit 事件并提取 action 属性的表单元素也是如此。

如果由于某种原因你正在操纵一些没有 url 概念的 DOM 元素，你总是可以使用 HTML5 data-* 属性：

<div id="myDiv" data-url="@Url.Action("MethodName", "ControllerName")">click me</div>

然后在您单独的 js 文件中：

$('#myDiv').click(function() {
    $.ajax({
       type: 'GET',
       url: $(this).data('url'),
       dataType: 'json',
       cache: false,
    });
});

这几乎就是哲学 - 在 ASP.NET MVC 应用程序中处理 url 时始终使用服务器端助手。

jQuery AJAX URL 不是亲戚

jQuery AJAX URL's not relative

ajax

jquery

asp.net-mvc-5