AJAX回调中锚标记的奇怪解析

Question

所以我正在对我的服务进行AJAX 调用，如下所示，我得到了响应，我通过在成功回调中插入一些HTML 将其显示在表格中。一切正常，我没有问题。下面添加了代码。

AJAX 电话

$.ajax({
        type: 'GET',
        url: 'http://localhost:56083/Service1.svc/Web/GetAll',
        dataType: 'json',
        processData: 'false',
        contentType: "application/javascript",
        success: function (data) {
            console.log(data);
            $('#log-Details').data("respData", data);
            cache[cacheValue] = data;
            console.log(cache[cacheValue]);
            $.each(data, function (key, value) {
                var IntId = value.IntegrationId;
                var Status = value.Status;
                changeStatusCSS(Status);
                $('<tr><td>' + icon + '<a style="' + cssClass + '" id="row' + IntId + '" href="@Url.Action("Details", "Integration")">#' + IntId + '</a></td><td>'
                    + Status + '</td>').appendTo('#log-Details');

            });
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
        }
    })

浏览器解析<tr>的内部HTML如下

<td>
  <span class="glyphicon glyphicon-ok-sign" style="color:#007A24"></span>
  <a style="color:#007A24" id="row1" href="/Integration/Details">#1</a>
</td>
<td>Success</td>

但是，我决定为AJAX 调用编写一个通用方法，因为我需要经常重用AJAX 调用格式。所以我修改了如下代码，并为成功回调添加了一个单独的方法。

function getPagedResult(url) {
    $.ajax({
        url: url,
        type: "GET",
        datatype: "json",
        contentType: "application/json",
        success: function(response){
            OnSuccess(response);
        },
        failure: function (response) {
            console.log(response);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
        }
    });
}

function OnSuccess(data) {
    $.each(data, function (key, value) {
        var IntId = value.IntegrationId;
        var Status = value.Status;
        changeStatusCSS(Status);
        $('<tr><td>' + icon + '<a style="' + cssClass + '" id="row' + IntId + '" href="@Url.Action("Details", "Integration")">#' + IntId + '</a></td><td>'
                       + Status + '</td>').appendTo('#log-Details');

    });
}

正如您所见，两个成功回调没有区别，因为我所做的只是从前面的代码部分复制并将其粘贴到此方法中。但是，这一次浏览器出于某种未知原因解析了下面的innerHTML，这导致点击锚标记时出错。形成的 URl 类似于“http.../Integration/@Url.Action(”。努力找出这种行为变化背后的原因。

<td>
  <span class="glyphicon glyphicon glyphicon-refresh" style="color:#337ab7"></span>
  <a style="color:#337ab7" id="row5" href="@Url.Action(" details ",=" " "integration ")"="">#5</a>
</td>
<td>InProgress</td>

Answer 1

使用 javascript 动态添加元素时，不建议使用 @Url.Action("Details", "Integration")，因为那是服务器端语言。

在客户端，"/Integration/Details" 是有价值的。

使用

'" href="/Integration/Details">#'

而不是

'" href="@Url.Action("Details", "Integration")">#'