时间戳

首页 > 解决方案 > 如何将 fetch api 与 .cfm 文件一起使用？

javascript - 如何将 fetch api 与 .cfm 文件一起使用？

问题描述

我正在尝试使用 fetch api 从我的 index.cfm 中获取 checkin.cfm 文件。我得到的只是 500 服务器错误。我需要对 ColdFusion 做些什么不同的事情吗？

JavaScript

fetch("./src/checkin.cfm")
    .then(function (response) {
        return response.text();
    })
    .then(function (body) {
        document.querySelector("#checkin").innerHTML = body;
    });

索引.cfm

<cfoutput>
  <div id="checkin"></div>

  <script src="js/app.js"></script>
</cfoutput>

签入.cfm

<cfoutput>

    <cfset session_valid =  application.lib.check_session_valid()>

    <h1>Hello World</h1>
</cfoutput>

标签： javascriptcoldfusionfetch

解决方案

您需要在“CFML”模板中序列化您的数据：

签入.cfm

选项1：

<cfset data = StructNew()>

<cfset data['session_valid'] =  application.lib.check_session_valid()>

<cfset data['html'] = '<h1>Hello World</h1>'>

<cfoutput>
#SerializeJSON(data)#
</cfoutput>

选项 2：

<cfset data = StructNew()>
    
<cfset data['session_valid'] =  application.lib.check_session_valid()>

<cfsavecontent variable="html">
<h1>I am a whole page of HTML</h1>
</cfsavecontent>
    
<cfset data['html'] = html>
    
<cfoutput>
#SerializeJSON(data)#
</cfoutput>

另外，请确保您设置了正确的：

Access-Control-Allow-Origin

如果您的客户端代码与您的 CFML 模板位于不同的服务器/端口上。在生产中，这可能不是问题，但是，如果你像我一样使用 Angular，它在 4200 端口上本地运行，而你的 Coldfusion 应用程序服务器在 8500 端口上运行，那么这个标头就变得非常重要。

在您的 JavaScript 中，您需要解析 JSON 响应：

fetch("./src/checkin.cfm")
.then(function (response) {
    return response.text();
})
.then(function (json) {
    var response = JSON.parse(json);
    console.log('response: ',response);
    if('html' in response){
        document.querySelector("#checkin").innerHTML = response['html'];
    }
});

我已经对此进行了测试，它可以 100% 工作，所以如果您仍然遇到错误，我建议您使用以下方法查看响应：

Firefox Dev Tools -> Network -> XHR -> Response

并查看 Coldfusion 是否由于以下问题在checkin.cfm中引发错误：

application.lib.check_session_valid()

推荐阅读