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

Question

我需要替换页面的整个HTML或其正文内容(而不是将更多html附加到现有内容).

接受答案在这里教我如何返回数据,但加入到"身体"不相当的工作.这是我现在拥有的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,然后将返回的数据附加到正文中.

这个REST方法返回我想要的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"
        )
    };
}

...但是它附加了返回的html而不是替换它 - 原始的主体html是完整的,并且返回的html显示在页面底部的下方.

我如何替换,而不是追加这个HTML？我试过替换和替换,但这些对我不起作用.

Answer 1

remove()将删除body元素(而不是清除它).您可以使用它来匹配您尝试执行的操作

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

但最好使用

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

您还可以查看jQuery load()函数,该函数会将html放入元素中.