Question

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

Coldfusion代码

<!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，这是我的组件文件ie（add.cfc）

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

在运行我的代码时...我抛出错误，输入错误和更多警告......请帮帮我

Answer 1

我使用 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>

Answer 2

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

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

请注意，在您的示例中，您应使用$("#click")代替$("#button")。

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

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

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

2 个答案: