当我从通过ajax调用的rest方法返回动态生成的HTML时,我将替换页面上的HTML,如下所示:

[HttpGet]
[Route("{unit}/{begdate}/{enddate}", Name = "QuadrantData")]
public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate)
{
    _unit = unit;
    _beginDate = begdate;
    _endDate = enddate;
    string beginningHtml = GetBeginningHTML(); // This could be called from any page to reuse the same "header"
    string bodyBeginningHtml = GetBodyBeginHTML();
    string top10ItemsPurchasedHtml = GetTop10ItemsPurchasedHTML();
    string pricingExceptionsHtml = GetPriceComplianceHTML();
    string forecastedSpendHtml = GetForecastedSpendHTML();
    string deliveryPerformanceHtml = GetDeliveryPerformanceHTML();
    string endingHtml = GetEndingHTML();
    String HtmlToDisplay = string.Format("{0}{1}{2}{3}{4}{5}{6}",
        beginningHtml,
        bodyBeginningHtml,
        top10ItemsPurchasedHtml,
        pricingExceptionsHtml,
        forecastedSpendHtml,
        deliveryPerformanceHtml,
        endingHtml);

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

它是从就绪函数中调用的(单击按钮时),如下所示:
$(document).ready(function () {
    $("body").on("click", "#btnGetData",
        function () {
            var _begdate = $("#datepickerFrom").val();
            var _enddate = $("#datepickerTo").val();
            var _unit = $("#unitName").text();
            $("#newhourglass").removeClass("hide");

            $.ajax({
                type: 'GET',
                url:
                    '@Url.RouteUrl(routeName: "QuadrantData", routeValues
new { httpRoute = true, unit = "un", begdate = "bd", enddate = "ed" })'
            .replace("un", encodeURIComponent(_unit))
            .replace("bd", encodeURIComponent(_begdate))
            .replace("ed", encodeURIComponent(_enddate)),
                contentType: 'text/plain',
                cache: false,
                xhrFields: {
                    withCredentials: false
                },
                success: function (returneddata) {
                    $("body").html(returneddata);
                    $("#newhourglass").addClass("hide");
                },
                error: function () {
                    console.log('error in ajax call to QuadrantData');
                    $("#newhourglass").addClass("hide");
                }
            });
        });
        . . .

名为“htmltodisplay”(在Ajax调用中为“returneddata”)的字符串的开头如下:
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>eServices Reporting - Customer Dashboard</title><link rel=\"stylesheet\" href=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css\"><script src= . . .

如您所见,它不是以一个虚假的/多余的“body”标签开始的,但是当我通过chrome dev tools中的f12查看页面源时,第一件事(在“<!DOCTYPE html>”之上,其余的)是“<body>
为什么<body>存在?
在chrome dev tools的控制台中,有一个err msg“uncaught syntaxerror:unexpected token var”
当我单击它时,它将带我进入“<body>”标记。
所以我不仅想知道为什么有“<body>”,而且想知道为什么chrome dev tools显然认为它是一个名为“var”的令牌。
在尝试替换原始HTML之前,我已经仔细地将“htmltodisplay”的内容与HTML页面源代码进行了比较,没有发现明显的差异(只是字符串的转义(“\”)符号等)。
为什么Chrome会在我的HTML顶部弹出一个<body>标记,为什么当2单击“uncaught syntaxerror:unexpected token var”console err msg时会带我到那里?
更新
奇怪的是,或者看起来,至少,我不认为多余/虚假的<body>标记是真正的问题,因为出于某种原因,它也在未修改的页面上-在我甚至单击按钮替换HTML之前,页面(查看页面源)开始:
<body>

<!DOCTYPE html>
<html>
<head>

更新2
这个多余/虚假的“<body>”标记显然来自于Layout.cshtml,它是:
<body>
    @RenderBody()
    <hr />
    <footer>
        <p> &copy; @DateTime.Now.Year - PRO*ACT USA</p>
    </footer>
</body>

当我同时删除(打开和关闭)标签时,谜团就解决了——它们不再出现在HTML中。
不过,我仍然有相同的基本问题;只是控制台中的err msg现在在2单击时转到“<body>”上方的空行。
为什么HTML以空行开头,这可能有问题吗?
文档第1行的初始空白行同时出现在视图页面源代码和chrome dev工具中。

最佳答案

查看错误消息,我认为它与HTML没有任何关系,而是与嵌入在HTML中的JS代码有关。
在声明下一个Uncaught SyntaxError: Unexpected token var之前,是否缺少分号/括号/语句结尾?我建议您将完整的var复制到您最喜欢的编辑器中,并搜索所有returneddata以查看上一行是否有任何问题。

09-10 11:22
查看更多