B. *_*non 5 html c# ajax jquery google-chrome-devtools
当我从通过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= . . .
正如您所看到的,它不是以虚假/多余的"正文"标签开头,但当我在Chrome开发工具中通过F12查看页面源时,第一件事(上面" <!DOCTYPE html>"和其余部分)是" <body>"
为什么<body>？
在Chrome Dev Tools的控制台中,有一个错误的消息" Uncaught SyntaxError:Unexpected token var "
当我点击它时,它会转到" <body>"标签.
因此,我不仅想知道为什么<body>会出现这种情况,而且还有为什么Chrome Dev Tools显然认为它是一个名为"var"的令牌
在尝试替换原始html之前,我煞费苦心地将"HtmlToDisplay"的内容与html页面源进行了比较,并且没有看到明显的差异(只是字符串的转义("\")符号等).
为什么Chrome会<body>在我的HTML顶部打一个标签,为什么在点击" 未捕获的SyntaxError:Unexpected token var "控制台错误消息时,它会带我到那里？
很奇怪,或者似乎,至少,我不认为多余/虚假<body>标签真的是问题,因为由于某种原因它也在未修改的页面上 - 在我甚至点击按钮来替换html之前,页面(查看页面源)开始:
<body>
<!DOCTYPE html>
<html>
<head>
这个多余的/虚假的" <body>"标签显然来自_Layout.cshtml,它是:
<body>
@RenderBody()
<hr />
<footer>
<p> © @DateTime.Now.Year - PRO*ACT USA</p>
</footer>
</body>
当我删除(打开和关闭)<body>标签时,神秘感已经解决 - 它们不再出现在html中.
不过,我仍然有同样的基本问题; 它只是控制台中的错误消息现在在<!DOCTYPE html>点击两次时变为" " 以上的空行.
为什么html以空行开头,这可能有问题吗？
文档第1行的初始空白行显示在"查看"页面源和Chrome开发工具中.
看看错误消息，Uncaught SyntaxError: Unexpected token var我认为它与 HTML 没有任何关系，而是与嵌入在 HTML 中的JS代码有关。
在声明下一个之前，您是否缺少分号/括号/语句结尾var？我建议您将完整内容复制returneddata到您最喜欢的编辑器中，然后搜索所有s 以查看前一行var是否有任何问题。