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);
        }
    })

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

<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类似于＆＃34; http ... / Integration/@Url.Action( ＆＃34;。正在努力找出行为改变背后的原因。

<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")">#'

在AJAX回调中对锚标记进行奇怪的解析

1 个答案: