來自AJAX的發布參數請求在ColdFusion的表單范圍內未定義

Question

我正在開發ColdFusion 8培訓應用程序，其中正在提出一些AJAX請求（沒有jQuery之類的任何庫）以支持非常基本的CRUD應用程序。 高級體系結構包括CFM視圖，具有接收AJAX請求的遠程訪問方法的CFC，以及充當模型並具有所有數據庫查詢的CFC。 對於僅檢索不需要任何綁定變量（例如從表中獲取所有行）的數據，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，因為它已經在其他地方進行了測試，甚至在此過程中都沒有達到（因為它在中級[或控制器]級別上失敗了）

 <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>

請求響應中的錯誤是：FORM中未定義500元素NEWLOC

就像我之前說過的那樣，我已經在篡改數據中檢查了該請求，在那里看起來還不錯。 在此先感謝您偉大的人們可能提供的任何幫助！

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，並更改Submit按鈕以添加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>

更新：不確定為什么一次調用遠程方法時沒有遇到任何窗體作用域。 無論如何，這是不正確的，但其余答案仍然適用。