我的 AJAX 响应格式有问题。我的javascript从CFM查询中接收数据，它应该存储为JSON响应，它看起来正确，我将我的响应打印到div/header/paragraph...等等，但是当我console.log我的响应时，它打印了一个混乱的车库。寻求帮助将响应存储为parable json变量。
Java脚本代码：
<script type="text/javascript">
function getFilteredYear() {
var year = document.getElementById("yearList").value
var postData = {
year: year
};
var ajaxResponse = $.ajax({
type: "post",
url: "http://localhost:8888/New/api.cfm",
contentType: "application/json",
data: JSON.stringify( postData ),
success : function(response){
document.getElementById("response").innerHTML = response;
console.log(response);
}
});
}
</script>冷融合代码：Api.cfm
<cfset requestBody = toString( getHttpRequestData().content ) />
<cfif isJSON( requestBody )>
<cfset var ="#deserializeJSON( requestBody )#">
<cfset year = var.year>
<cfquery name="qList" datasource="aws_db">
SELECT * FROM Continuous_Home_Care WHERE Continuous_Home_Care.Year = #var.year#
</cfquery>
<!--- Echo back POST data. --->
<cfdump var="#serializeJSON(qList)#" />
</cfif>输出：
x1c 0d1xConsole日志输出：
控制台日志（）：
<!-- ==start== dump {ts '2022-11-08 18:13:28'} format: html -->
<div id="x3j" class="-lucee-dump"><style>
.-lucee-dump .disp-none { display: none; }
</style>
<script>
window.__Lucee = { initialized : false,
addEventListeners : function(selector, event, handler, useCapture){
useCapture = useCapture || false;
Array.prototype.forEach.call(
document.querySelectorAll(selector)
,function(el, ix) {
el.addEventListener(event, handler, useCapture);
}
);
}
,getNextSiblings : function(el){
var orig = el
,result = [];
while (el && el.nodeType === Node.ELEMENT_NODE) {
if (el !== orig)
result.push(el);
el = el.nextElementSibling || el.nextSibling;
}
return result;
}
,onDocumentReady : function(){
var L = window.__Lucee;
if (L.initialized)
return;
L.addEventListeners(".collapse-trigger", "click", function(evt){
var tr = evt.target.closest("tr");
var siblings = L.getNextSiblings(tr);
siblings.forEach(function(el, ix){
el.classList.toggle("disp-none");
});
});
L.initialized = true;
}
}
document.addEventListener("DOMContentLoaded", __Lucee.onDocumentReady);
</script>
<style type="text/css">
div#x3j table {font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; font-size:11px; empty-cells:show; color:#000; border-collapse:collapse;}
div#x3j td {border:1px solid #000; vertical-align:top; padding:2px; empty-cells:show;}
div#x3j td span {font-weight:bold;}
div#x3j td.luceeN0 {color:#990000;border-color:#990000;background-color:#fc9;}
div#x3j td.luceeH0 {color:#990000;border-color:#990000;background-color:#f60;}
</style>
<table title="/Users/xxxxx/Lucee/webapps/ROOT/New/api.cfm:15"><tr><td class="luceeH0">string</td><td class="luceeN0">{"COLUMNS":["ID","Home","Assisted Living Facility","LTC/NF","Skilled Nursing Facility (SNF)","Inpatient Hospital","Inpatient Hospice Facility","Long Term Care Hospital","Inpatient Psychiatric Facility","Place Not Otherwise Specified","Hospice Home Care Provided in Hospice Facility","Year"],"DATA":[[6,150133149.00,46885968.00,19490091.00,0.00,0.00,0.00,0.00,0.00,452709.00,255456.00,2020]]}</td></tr></table></div>
<!-- ==stop== dump -->
1条答案
按热度按时间z9zf31ra1#
为什么javascriptconsole.log和我的.innerHTML响应不一样
是一样的
你的回应是HTML，浏览器正在呈现HTML（这就是浏览器的功能），控制台正在记录你给它的原始HTML文本，这就是 * 它 * 的功能。
你实际上希望在日志中看到什么？呈现的HTML？不。控制台不是浏览器，它是一个记录器。
要向自己证明这一点：将日志条目的内容保存为
test.html，然后在浏览器中打开它。您将看到以下内容：和你问题里的垃圾场一样！
所以我认为你在这里没有问题只是一些期望值管理。
也就是说，你的方法有问题，你这样说：
这不是代码所做的，而是使用
<cfdump>-一个调试工具，不应该在生产代码中使用-在一个漂亮的可视表格中呈现数据，以便进行调试分析。您希望将JSON返回到浏览器。根据您没有显示的方法的其余部分，可能是：
或者：
你现在正在做的就是输出一些HTML。你想要 * 返回 * 数据。