2

我正在开发一个 ColdFusion 8 培训应用程序，我在其中发出一些 AJAX 请求（没有任何库，如 jQuery）来支持一个非常基本的 CRUD 应用程序。高级架构包括一个 CFM 视图、一个具有远程访问方法的 CFC，它接收 AJAX 请求，以及一个充当模型并具有所有数据库查询的 CFC。对于仅检索不需要任何类型的绑定变量的数据（例如从表中获取所有行），AJAX 查询工作正常。但是，当我尝试将任何内容发布到 CFC 中间层时，我收到有关我正在寻找的值在 Form 范围内未定义的错误（据我所知，这是存储后参数的位置）。

以下是 JS AJAX 请求的示例：

    function addLocation(locToAdd) {
            var thisAccess = new AccessStruct("POST", "jsontest.cfc?method=addNewLocation", getLocations, "newLoc=" + JSON.stringify(locToAdd));
            accessWrapper("addLoc", thisAccess);

    function accessWrapper(action, accessDef) {
            var ajaxRequest = new XMLHttpRequest();
            var nextStep;
            if (action != "getLocs") {
                nextStep = getLocations;
            } else {
                nextStep = buildTable;
            }

            ajaxRequest.onreadystatechange = function() { // using a closure so that the callback can
                if (ajaxRequest.readyState == 4) {        //   examine the request and nextStep
                    if (ajaxRequest.status == 200) {
                        if (nextStep != null) {
                            nextStep(ajaxRequest);
                        }
                        return true;
                    } else {
                        alert("Request Could Not Be Completed; Errors On Page");
                        return false;
                    }
                }
            }
            ajaxRequest.open(accessDef.method, accessDef.url, true);
            ajaxRequest.send("newLoc=" + accessDef.params);
    }


    function Loc(locCode, parLocCode, name, addrL1, addrL2,
                            city, stateProv, postal, locTypeCode) {
            this.locCode     = locCode;
            this.parLocCode  = parLocCode;
            this.name        = name;
            this.addrL1      = addrL1;
            this.addrL2      = addrL2;
            this.city        = city;
            this.stateProv   = stateProv;
            this.postal      = postal;
            this.locTypeCode = locTypeCode;
        }

        function AccessStruct(method, url, nextStep, params) {
            this.method   = method;
            this.url      = url;
            this.nextStep = nextStep;
            this.params   = params;
        }

基本上页面上发生的事情是正在为“用户”呈现由所有位置（loc）记录填充的表。有一个添加新用户的表单，当他们单击添加按钮时，会创建一个 Loc 结构，其中包含他们输入的信息并传递给 addLocation 函数。这将创建一个 Access 结构，其中将包括请求 URL、方法、用作回调的函数的名称以及任何 post 参数。这一切都传递到 accessWrapper 函数中，该函数将创建 XMLHttpRequest 并处理 AJAX 请求。

这是报告问题的中间层 CFC 中的 cffunction。我不会费心发布 DAO CFC，因为它已经在其他地方进行了测试，并且在此过程中甚至没有达到（因为它在中间 [或控制器] 级别失败）

 <cffunction name="addNewLocation" output="false" access="remote">
    <cfset var deserializedLocation = "">
    <cfscript>
        deserializedLocation = DeserializeJSON(Form.newLoc);
    </cfscript> 
    <cfobject component="locationDAO" name="locationDAOObj">
    <cfinvoke
        component="#locationDAOObj#"
        method="addLocation">
        <cfinvokeargument name="code" value="#deserializedLocation.locCode#">
        <cfinvokeargument name="parentCode" value="#deserializedLocation.parLocCode#">
        <cfinvokeargument name="name" value="#deserializedLocation.name#">
        <cfinvokeargument name="addr1" value="#deserializedLocation.addrL1#">
        <cfinvokeargument name="addr2" value="#deserializedLocation.addrL2#">
        <cfinvokeargument name="city" value="#deserializedLocation.city#">
        <cfinvokeargument name="stateProv" value="#deserializedLocation.stateProv#">
        <cfinvokeargument name="postal" value="#deserializedLocation.postal#">
        <cfinvokeargument name="locationType" value="#deserializedLocation.locTypeCode#">
    </cfinvoke>
</cffunction>

请求响应中的错误是：500 Element NEWLOC is undefined in FORM

就像我之前说的，我检查了 Tamper Data 中的请求，那里看起来不错。提前感谢您提供的任何帮助！

4

2 回答 2

4

当您将 Ajax 发布到 CFC 时，绝对有一个 FORM 范围。

此示例通过 Ajax 将表单数据 POST 到不带参数的 CFC 函数，并返回 FORM 范围的 JSON 格式。是的，你应该有参数来记录，指定需要/不需要和数据类型，但它们不是强制性的。

你有什么理由不使用 jQuery 吗？它可能会让你的生活更轻松。

您将表单数据发送到 Ajax 调用的方式一定有问题。如果您使用 FireBug 观察您的 Ajax 调用，您可以看到 POSTed 参数。

HTML

<html>
    <head>
        <title>Ajax POST to CFC</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="test.js">
    </head>
    <body>

        <form id="foo" action="" method="post">

            <input type="text" id="a" name="a" value="Hello" />
            <br />
            <input type="text" id="b" name="b" value="Goodbye" />
            <br />

            <textarea id="data" cols="30" rows="10" disabled="true"></textarea>
            <br />
            <input type="button" id="btnSubmit" value="Do Ajax!" />

        </form>

    </body>

</html>

JavaScript 

$(document).ready(function() {
    $('#btnSubmit').on('click', function() {
        $.ajax({
            asynch : true,
            type : 'POST',
            dataType : 'json',
            url : 'test.cfc?method=testing&returnformat=json',
            data : {
                a : $('#a').val(),
                b : $('#b').val()
            },
            success : function(data, textStatus) {
                $('#data').val(JSON.stringify(data));
            }
        });
    });
});

氟氯化碳 

<cfcomponent>
    <cffunction name="testing" access="remote" output="false" returntype="string">
        <cfreturn serializeJSON( form ) />
    </cffunction>> 
</cfcomponent>

老派，没有 jQuery，只有普通的 JavaScript

我在这里找到了一个没有 jQuery 的 Ajax POST 的简单示例： http ://www.openjs.com/articles/ajax_xmlhttp_using_post.php

HTML
删除 jQuery SCRIPT 标记，将另一个 SCRIPT 更改为 test-nojq.js 并更改提交按钮以添加 onclick 事件。 

<input type="button" id="btnSubmit" value="Do Ajax!" onclick="doSubmit();" />

JavaScript：test-nojq.js 

function doSubmit(){
    var http = new XMLHttpRequest();
    var url = "test.cfc";
    var params = "method=testing&returnformat=json";
        params += "&a=" + document.getElementById('a').value;
        params += "&b=" + document.getElementById('b').value;
    http.open("POST", url, true);
    //Send the proper header information along with the request
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", params.length);
    http.setRequestHeader("Connection", "close");
    http.onreadystatechange = function() {//Call a function when the state changes.
        if(http.readyState == 4 && http.status == 200) {
            document.getElementById('data').value = http.responseText;
        }
    }
    http.send(params);
}

于 2012-07-13T14:49:05.620 回答
0

成为newLoc一个论点，它应该工作。

<cffunction name="addNewLocation" output="false" access="remote">
  <cfargument name="newLoc">
  ...

</cffunction>

更新：不知道为什么我一次调用远程方法时没有遇到表单范围。无论如何，这不是真的，但其余的答案应该仍然成立。

于 2012-07-12T21:41:41.430 回答