Question

我正在开发一个ColdFusion 8培训应用程序，我正在制作一些AJAX请求（没有任何库，如jQuery）来支持一个非常基本的CRUD应用程序。高级体系结构包括CFM视图，具有接收AJAX请求的远程访问方法的CFC，以及充当模型并具有所有数据库查询的CFC。对于只检索不需要任何类型绑定变量的数据（比如从表中获取所有行），AJAX查询工作正常。但是，当我尝试向CFC中间层发布任何内容时，我收到的错误是我正在寻找未在表单范围中定义的值（根据我的理解，将存储post参数的位置）。我甚至用篡改数据解析了这些请求，并验证了post参数的名称和值是否符合预期。

以下是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）记录填充的表。有一个表单可以添加新用户，当他们单击添加按钮时，会创建一个包含他们输入的信息并传递给addLocation函数的Loc结构。这将创建一个Access结构，其中包括请求URL，方法，充当回调函数的名称以及任何post参数。这全部传递到accessWrapper函数，该函数将创建XMLHttpRequest并处理AJAX请求。我为onreadystatechange回调函数使用了一个闭包，这样它就可以知道XMLHttpRequest对象和Access结构中定义的回调函数（这个回调函数通常用于在添加，删除记录后刷新视图表，或编辑）。

以下是报告问题的中间层CFC中的功能。我不打算发布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元素NEWLOC未在FORM中定义

就像我之前说的那样，我已经在Tamper Data中检查了请求，它在那里看起来很好。提前感谢大家们提供的任何帮助！

Answer 1

当您向CFC执行Ajax发布时，绝对有一个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));
            }
        });
    });
});

<强> CFC

<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);
}

Answer 2

将newLoc变为参数，它应该有效。

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

</cffunction>

更新：不确定为什么我一次调用远程方法时没遇到任何表单范围。无论如何，这不是真的，但答案的其余部分应该仍然适用。

在ColdFusion中，在表单范围中未定义来自AJAX请求的post参数

2 个答案: