如何通过 AJAX 调用的成功回调替换整个 HTML 页面或其正文内容？

Question

我需要替换整个 HTML 页面或其正文内容（而不是将更多 html 添加到现有内容）。

已接受的答案向我展示了如何 return 数据，但将其添加到 "body" 完全不起作用。这是我现在的jQuery：

<script>
    $(document).ready(function () {
        $("#btnGetData").click(function () {
            document.body.style.cursor = 'wait';
            $.ajax({
                type: 'GET',
                url: '@Url.RouteUrl(routeName : "QuadrantData", routeValues : new { httpRoute = true , unit = "ABUELOS", begdate = "2016-08-20", enddate = "2016-08-27"  })',
                contentType: 'text/plain',
                cache: false,
                xhrFields: {
                    withCredentials: false
                },
                success: function (returneddata) {
                    $("body").remove;
                    $("body").append($(returneddata));
                },
                error: function () {
                    console.log('hey, boo-boo!');
                }
            }); // ajax
            document.body.style.cursor = 'pointer';
        }); // button click
    }); // ready
</script>

...所以你可以看到我试图先删除正文中的 html，然后将 returned 数据附加到正文中。

此 REST 方法return是我想要的html：

[System.Web.Http.HttpGet]
[System.Web.Http.Route("{unit}/{begdate}/{enddate}", Name = "QuadrantData")] 
public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate)
{
    _unit = unit;
    _beginDate = begdate;
    _endDate = enddate;
    string beginningHtml = GetBeginningHTML();
    string top10ItemsPurchasedHtml = GetTop10ItemsPurchasedHTML();
    string pricingExceptionsHtml = GetPricingExceptionsHTML();
    string forecastedSpendHtml = GetForecastedSpendHTML();
    string deliveryPerformanceHtml = GetDeliveryPerformanceHTML();
    string endingHtml = GetEndingHTML();
    String HtmlToDisplay = string.Format("{0}{1}{2}{3}{4}{5}",
        beginningHtml,
        top10ItemsPurchasedHtml,
        pricingExceptionsHtml,
        forecastedSpendHtml,
        deliveryPerformanceHtml,
        endingHtml);

    return new HttpResponseMessage()
    {
        Content = new StringContent(
            HtmlToDisplay,
            Encoding.UTF8,
            "text/html"
        )
    };
}

...但它附加了 returned html 而不是替换它 - 原始主体 html 完好无损， returned html 出现在页面底部的下方。

如何替换而不是追加这个 html？我尝试了 replacewith 和 replaceall，但这些对我不起作用。

Answer 1

remove() 将删除 body 元素（而不是仅仅清除它）。您可以使用它来匹配您正在尝试做的事情

$("body").empty();  
$("body").append($(returneddata));

但最好用

$("body").html(returneddata);

您可能还想查看 jQuery load() 函数，它会为您将 html 放入元素中。

Answer 2

由于您发送了内容类型 text/html，您的代码应该可以正常工作。

尝试像这样使用 Jquery.parseHTML 函数

$("body").append($.parseHTML( returneddata )));

你也有错行

$("body").remove; 
//it should be empty() since remove() remove all the content including body it self
$("body").empty();

Link: https://api.jquery.com/jquery.parsehtml/

Answer 3

您只需使用 $.get() 和 .html() 即可完成此操作。由于语法错误（缺少括号），您的 .remove 调用将无法正常工作，并且因为 .remove() 会删除主体，因此您无法将任何内容附加到之后。你将不得不做类似

的事情

$(document).append($('<body>').append(returneddata));

为了重新创建 BODY 节点并将数据附加到它。

此外，您应该将光标重置代码放在 .always 处理程序中，否则它将在 .get 或 .ajax 之前设置 和重置 调用有机会执行。

一般来说，

console.log('this is executed first');
$.get('...', function(){
    console.log('this should be executed third... sooner or later');
});
console.log('this is almost certainly executed second');

因此您的代码可以是：

$('#btnGetData').on('click', function() {
    $('body').css({ cursor: 'wait'});
    $.get(
          '@Url.RouteUrl(routeName : "QuadrantData", routeValues : new { httpRoute = true , unit = "ABUELOS", begdate = "2016-08-20", enddate = "2016-08-27"  })'
            )
    .done(function(data) {
       // Replace 
       $('body').html(data);
    })
    .fail(function() {
       // Always plan for errors. Murphy rules.
       alert("error");
    })
    .always(function(){
        $('body').css({ cursor: 'pointer'});
    });
})

这是上面的fiddle。

Answer 4

虽然您已经在使用 jquery，但您并不真的需要为此使用它。为了将 body 元素的 html 替换为存储在变量 newHTMLstring 中的 html，请将其放入您的回调函数中：

document.body.innerHTML = newHTMLstring;

如果要先清除正文元素的html，只需将.innerHTML设置为空字符串即可：

document.body.innerHTML = '';

这个 vanilla js 速度更快，适用于所有浏览器。

Answer 5

您可以直接将 ajax 结果设置为正文，如下所示：

$("body").html(ajax结果);

仍然无法正常工作，然后确保 jquery 已正确加载，并准备好在文档上编写脚本，

$(文档).ready(函数(){

// 您的 AJAX 调用请求

});

如何通过 AJAX 调用的成功回调替换整个 HTML 页面或其正文内容？

How can I replace the entire HTML of a page, or its body content, via an AJAX call's success callback?

javascript

jquery

replaceall

replacewith

asp.net-web-api