使用 cfajaxproxy 对 Coldfusion 组件的 Ajax 调用答案

【问题标题】：Ajax call to coldfusion component using cfajaxproxy使用 cfajaxproxy 对 Coldfusion 组件的 Ajax 调用
【发布时间】：2013-08-14 15:31:24
【问题描述】：

我被以下代码卡住了，希望有人可以帮助或给我一些建议：基本上我正在做的是使用ajax调用一个cf函数：当用户在“artid”字段中写一个id时与该 id 相关的信息将出现在其他 cfinput 中。上面的代码工作正常。

<cfajaxproxy bind="cfc:portal_dgmu.pruebas.addPerson.test.getData({artid@keyup})" onsuccess="showData">

<script>

function showData(d) {
var data = {}
for(var i=0; i < d.COLUMNS.length; i++) {
    data[d.COLUMNS[i]] = d.DATA[0][i]
}
document.getElementById('artname').value = data["ARTNAME"]
document.getElementById('description').value = data["DESCRIPTION"]
document.getElementById('price').value = data["PRIZE"]

}
</script>
<html>
<cfform>
id: <cfinput type="text" name="artid" id="artid"><br/>
nombre: <cfinput type="text" name="artname" id="artname" readonly="true"><br/>
descripcion: <cftextarea name="description" id="description" readonly="true"></cftextarea><br/>
precio: <cfinput type="text" name="price" id="price" readonly="true"><br/>
</cfform>
</html>

我也有以下代码：

<script>
function addFields(){
        var number = document.getElementById("member").value;
        var container = document.getElementById("container");
        while (container.hasChildNodes()) {
            container.removeChild(container.lastChild);
        }
        for (i=0;i<number;i++){
            container.appendChild(document.createTextNode(i+1));
            var input = document.createElement("input");
            input.type = "text";
            input.name = "member" + i;

    var boton = document.createElement("input");
            boton.name = "boton" + i;       

            container.appendChild(input);
    container.appendChild(boton);
            container.appendChild(document.createElement("br"));
        }
    }
</script>

<html>
Enter a number of persons: (max. 10)<input type="text" id="member" size="3" name="member" value="">
<a href="#" id="filldetails" onclick="addFields()">Agregar</a>
<div id="container"/>
</html>

上面的代码只是根据用户输入的数字添加文本字段，它也可以正常工作。

我的问题是我无法弄清楚如何整合它们，我的意思是我需要做的是取决于用户输入的数字是部署文本字段，第一个必须输入一个 id将带来与该 ID 相关的数据。

非常感谢！！

【问题讨论】：

帮自己一个忙……停止使用<cfajaxproxy> 和cfform>（以及ColdFUsion 中的任何其他客户端幻灯片功能）。撕掉所有这些东西，并学习如何使用 jQuery 或其他一些 JavaScript 库在 JavaScript 中做到这一点。 ColdFusion 客户端的东西并不像它需要的那样健壮，您可能会遇到问题。
第二。特别是如果你现在才开始使用这些东西（而不是做遗留维护的东西），那就停下来，使用 HTML 和一个像样的 JS UI 库。 ColdFusion UI 的东西除了概念证明和 Adobe 向 IT 经理出售 CF 许可证外，并不适合任何其他用途。
感谢您的建议，我从未使用过 cfajaxproxy 我这样做是因为我发现它很容易，您能否告诉我一些与我需要的相关的教程或示例，我将不胜感激，我我没时间解决这个问题了。
考虑到您在此问题上寻求帮助，我认为您的断言 cfajaxproxy 很“简单”。这是开始学习 jQuery 及其 .ajax() 方法的好地方。 - api.jquery.com/jQuery.ajax
@user2683052 - 如果我正确理解了目标，它涉及到动态绑定到动态添加的表单字段。在这种情况下，您可能无论如何都无法使用 cfjaxproxy。

标签： javascript ajax coldfusion cfajaxproxy

【解决方案1】：

这是一个使用 jquery 的示例，它涵盖了您想要做的所有事情。

我将 ajax 请求更改为在更改输入字段而不是 keyup 时触发，但如果需要，您可以轻松更改。

如果您使用 cf

index.cfm

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var formToCopy = $('<form/>')
                                    .append($('<input/>', {'name': 'dataId', 'type': 'text', 'placeholder': 'Some Id Here'}))
                                    .append($('<input/>', {'name': 'testInput', 'type': 'text', 'readonly': 'readonly'}))
                                    .append($('<textarea/>', {'name': 'testArea', 'readonly': 'readonly'}));

                $('#howMany').on('change', null, null, function(e){
                    var numToAdd = $(this).val();

                    if(isNaN(numToAdd)){
                        return;
                    }
                    $('#container').html('');
                    for(var i=0; i < numToAdd; i++){
                        $(formToCopy).clone().appendTo('#container');
                    }
                });

                $('#moar').on('click', null, null, function(e){
                    $(formToCopy).clone().appendTo('#container');
                });

                $('#less').on('click', null, null, function(e){
                    $('#container form:last').remove();
                });

                $(document).on('change', '#container form input[name="dataId"]', null, function(e){
                    if($(this).val().length === 0){
                        return;
                    }

                    var $formToFill = $(this).closest('form');
                    var ajaxSuccessFunc = function(data){
                        for(var key in data){
                            var item = data[key];
                            var $field = $formToFill.find('input[name="'+key+'"], textarea[name="'+key+'"]');
                            if($field.length === 1){
                                $field.val(item);
                            }
                        }
                    };

                    $.ajax({
                        'url': '/test.cfc',
                        'dataType': 'json',
                        'data': {
                                    'method': 'getData',
                                    'id': $(this).val()
                                },
                        'success': ajaxSuccessFunc
                    })
                });
            });
        </script>
    </head>
    <body>
        <label>How Many? <input type="text" id="howMany" /></label>
        <p><a href="#zzz" id="moar">+</a> / <a href="#zzz" id="less">-</a></p>
        <div id="container">

        </div>
    </body>
</html>

test.cfc

<cfcomponent output="false">

    <cffunction name="getData" access="remote" output="false" returnformat="json">
        <cfargument name="id" type="string" required="true">
        <cfscript>
            local.ret = {};

            ret["testInput"] = rand();
            ret["testArea"] = "blah blah";
            return ret;
        </cfscript>
    </cffunction>

</cfcomponent>

【讨论】：

天啊！你好酷！非常感谢你！！！你不知道我花了多少时间让这段代码工作。真的真的非常感谢你！这正是我需要的！
抱歉打扰了，您能帮我做一件事吗？而是在 test.cfc 中使用 cfscript 我需要 cfquery，我确实知道该怎么做，但我不知道如何让文本字段在 cfquery 中接收信息。谢谢！
我修改了 .cfc，结果如下：myQry = new Query(); qryRes = myQry.execute(sql="select * from art where artid = '#id#'").getResult(); ret["testInput"] = #qryRes.artname#; ret["testArea"] = #qryRes.description#; return ret; 但它不起作用。
没有看到错误消息，我无法确定，但这可能是因为您缺少数据源，即local.myQry = new Query(datasource: "SOME_DATASOURCE"); local.qryRes = myQry.execute(sql="SQL").getResult();