我如何从ajax调用coldfusion组件文件答案

【问题标题】：how can i call coldfusion component file from ajax我如何从ajax调用coldfusion组件文件
【发布时间】：2016-02-27 06:54:34
【问题描述】：

我想了解coldfusion 到ajax 调用，这样我就可以在不重新加载ma 页面的情况下显示数据。举个简单的例子。通过单击按钮添加两个数字。为此，我需要两个输入元素和一个按钮，它应该显示在同一页面中。我想要做的是当我从用户那里得到输入时，他们点击我需要回答而不重新加载页面。所以我为我的场景使用了组件文件和编写的函数。我通过 ajax 调用我的组件。但我的东西出错了。让我展示一下我做了什么。

冷融合代码

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Adding two numbers</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>
        <form>
            <!--two numbers to add when clicking a button it will show my result in display-->
            FIRST NUMBER<input type="text" id="a" name="a" >
            SECOND NUMBER<input type="text" id="b" name="b">
            <input type="button" name="button" id="button" value="add">
            ANS<input type="text" name="display" id="display" readonly>
        </form>
    </body>
    <script language="JavaScript">
        $(document).ready(function() {
            $("#button").click(function(f) {
                // Next, we will be needing the value of the textfield in order to pass it to ColdFusion.
                var variableToPass = $("input#a").val();
                var variableToPass1 = $("input#b").val();
                $.ajax({
                    url: "add.cfc?method=add&returnformat=json",
                    data: {
                        a: variableToPass,
                        b: variableToPass1
                    },
                    success: function(result) {
                        $("#display").val(result);
                    }
                });
            });
        });
    </script>
</html>

我将它保存为 add.cfm，这是我的组件文件，即（add.cfc）

<cfcomponent>
     <cffunction name="add" access="remote" returntype="numeric">
         <cfargument name="a">
         <cfargument name="b">
         <cfset c=a+b>
         <cfreturn c>
     </cffunction>
</cfcomponent>

在运行我的代码时...我抛出错误类型错误和更多警告...请帮助我

【问题讨论】：

将提交按钮 id 更改为单击当前它是“按钮”
现在也是同一个 issueeeee....
为什么只返回数字数据时有 returnFormat= json？
'更多警告'？您收到的错误消息到底是什么？它们是 ColdFusion 错误还是 JS 错误？将它们添加到问题中。
请不要描述错误，只需将完整的错误消息添加到your question。

标签： jquery ajax coldfusion

【解决方案1】：

将返回类型 number 更改为 numeric。因为coldfusion函数没有返回类型number。

<cffunction name="add" access="remote" returntype="numeric">

请注意，在您的示例中，您应该使用 $("#click") 而不是 $("#button")。

然后使用val() 而不是html()，因为这是向input 字段添加值的方式。

$("#display").val(result);

【讨论】：

我在coldfusion服务器中没有看到任何错误......而且我也没有在我的视图中得到任何输出......当我看到firefor firebug时，我可以看到typedef错误和很多警告
@SowmyaSow 实际上我做到了，它对我有用。你确定 ajax 调用正在发生吗？
是的，ajax 调用正在发生...实际上我是个新手，因为我每天都在学习，所以我不知道很多...好吧，我必须知道我是否必须将我的 cfc 文件存储在我的冷融合
查看 Rejith ...当我在视图本身中输入输入时，我收到 dat 错误...例如类型 def 和更多警告
对于免费的 Cold Fusion 代码编辑器，您的谷歌搜索字符串是“coldfusion 免费代码编辑器”。

【解决方案2】：

我使用 div 代替 input 元素，它工作正常。

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Adding two numbers</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>
        <form>
            <!--two numbers to add when clicking a button it will show my result in display-->
            FIRST NUMBER<input type="text" id="a" name="a" >
            SECOND NUMBER<input type="text" id="b" name="b">
            <input type="button" name="button" id="button" value="add">
            ANS<div id="display"></div>
        </form>
    </body>
    <script language="JavaScript">
        $(document).ready(function() {
            $("#button").click(function(f) {
                var variableToPass = $("input#a").val();
                var variableToPass1 = $("input#b").val();
                $.ajax({
                    url: "add.cfc?method=add&returnformat=json",
                    data: {
                        a: variableToPass,
                        b: variableToPass1
                    },
                    success: function(result) {
                        $("#display").html(result);
                    }
                });
            });
        });
    </script>
</html>

【讨论】：

我真的不明白为什么这是公认的答案，因为@rrk answered 答案更接近原始代码。