为何JavaScript的console.log与innerHTML显示的AJAX响应不一致？

问题说明 #

通过JavaScript的AJAX请求CFM接口时，将响应输出到div等元素显示正常，但console.log打印出混乱的HTML代码，无法将响应存储为可解析的JSON变量。

问题根源 #

CFM代码中使用了<cfdump>输出JSON，该标签默认生成HTML格式的调试内容，而非纯JSON字符串。这导致响应内容包含大量HTML结构，虽然浏览器的innerHTML能解析显示其中的JSON文本，但无法直接作为JSON对象解析，且console.log会输出完整的HTML代码。

修复步骤 #

1. 修正ColdFusion接口代码（Api.cfm） #

替换<cfdump>为纯JSON输出，并设置正确的响应头，同时修复SQL注入风险：

<cfset requestBody = toString( getHttpRequestData().content ) />

<cfif isJSON( requestBody )>
    <cfset reqData = deserializeJSON( requestBody )>
    <cfset year = reqData.year>

    <!--- 使用cfqueryparam防止SQL注入 --->
    <cfquery name="qList" datasource="aws_db">
        SELECT * 
        FROM Continuous_Home_Care 
        WHERE Continuous_Home_Care.Year = <cfqueryparam cfsqltype="cf_sql_integer" value="#year#">
    </cfquery>  

    <!--- 设置响应头为JSON类型 --->
    <cfheader name="Content-Type" value="application/json; charset=utf-8">
    <!--- 输出纯JSON字符串 --->
    <cfoutput>#serializeJSON(qList)#</cfoutput>

</cfif>

2. 修正JavaScript代码 #

指定AJAX请求的dataType为json，让jQuery自动将响应解析为JSON对象，直接使用即可：

<script type="text/javascript">
  function getFilteredYear() {
    var year = document.getElementById("yearList").value;
    var postData = { year: year };
    
    $.ajax({
      type: "post",
      url: "http://localhost:8888/New/api.cfm",
      contentType: "application/json",
      dataType: "json", // 指定响应类型为JSON
      data: JSON.stringify(postData),
      success : function(response){
        // response已经是解析好的JSON对象
        console.log(response);
        // 若要显示到div，可转为格式化后的字符串
        document.getElementById("response").innerHTML = JSON.stringify(response, null, 2);
      }
    });
  }
</script>

验证效果 #

修改后：

• console.log(response)会直接输出结构化的JSON对象，而非HTML代码
• 可以直接将response作为JSON变量进行后续处理（如遍历数据、提取字段等）
• 输出到div时，使用JSON.stringify格式化后显示更清晰

内容的提问来源于stack exchange，提问作者AverageNJITStudent