javascript - 来自 AJAX 请求的发布参数在 ColdFusion 的表单范围内未定义

Question

我正在开发一个 ColdFusion 8 培训应用程序，我在其中发出一些 AJAX 请求(没有任何库，例如 jQuery)以支持非常基本的 CRUD 应用程序。 高级架构包括一个 CFM View 、一个具有接收 AJAX 请求的远程访问方法的 CFC，以及一个充当模型并具有所有数据库查询的 CFC。 对于仅检索不需要任何类型的绑定(bind)变量的数据(例如从表中获取所有行)，AJAX 查询工作正常。但是，当我尝试将任何内容发布到 CFC 中间层时，我收到关于我正在查找的值在 Form 范围内未定义的错误(根据我的理解，这是存储发布参数的位置)。我什至使用 Tamper Data 剖析了请求，并验证了 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) 记录填充的表格。有一个用于添加新用户的表单，当他们单击添加按钮时，将创建一个包含他们输入的信息的 Loc 结构，并将其传递给 addLocation 函数。这将创建一个 Access 结构，其中将包括请求 URL、方法、用作回调的函数的名称以及任何 post 参数。这全部传递到 accessWrapper 函数中，该函数将创建 XMLHttpRequest 并处理 AJAX 请求。 onreadystatechange回调函数我使用了一个闭包，这样它就可以感知到XMLHttpRequest对象和Access结构体中定义的回调函数(这个回调函数一般会用于在一条记录的新增、删除、或编辑)。

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

 <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

当您将 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);
}