当我从通过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> © @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
以查看上一行是否有任何问题。