将 Coldfusion 表单值传递给 javascript 和 CFC，代码不工作

Question

我试图将我的表单值传递到 javascript 函数中，该函数会将它们传递到我的 CFC 函数中以插入到数据库中，但它不起作用。 JS代码如下：

更新：删除了“.”在 alert() 和 url 之前：

$(document).ready(function() {
    $("#createReport").click(function(f) {
        var getReportName = $("input#reportName").val();
        var getReportPath = $("input#reportPath").val();
        var getReportDesc = $("input#reportDescrip").val();
        var getReportCategory = $("input#categoryBox").val();

        $.ajax({
            url: "components/reportController.cfc?method=createReport&returnformat=json",
            dataType: "JSON",
            data:{ 
                    reportName: getReportName,
                    reportPath: getReportPath,
                    reportDescrip: getReportDesc,
                    categoryBox: getReportCategory
            },
            success: function(){
                alert("You successfully added a new report to the system") } 
});
    });
});

Coldfusion 表单代码：（更新了我的表单，删除了 flash 类型和 CFlayout）

 <cfform name="addReportForm"  height="400" width="500" enctype="multipart/form-data">                                              <!--- Form Initialization --->
 <p> Report Name </p>
   <cfinput type="Text" name="reportName" size="20"maxlength="35" label="Report Name"                               <!--- Report Name Field --->
    value="Report Name" required="yes" id="reportName">     
 <p> Report Path </p>   
 <cfinput type="Text" name="reportPath" size="20" maxlength="35" label="Report Path"                                <!--- Report Path Field ---> 
 value="Report Path" required="yes" id="reportPath"> 

 <!--- Report Category Dropdown box --->   
 <p> Category </p>
 <cfselect name="category" label="Category" id="categoryBox" message="Select Category"                              <!--- DB populated drop down box for reports. Required field. ---> 
 width="250" required="yes" tooltip="Select Category">                                                              <!--- Values are static for testing. CFSELECT to be populated by query--->
 <option value="Admin Tools">Admin Tools </option>                                                                
 <option value="Reports">Reports</option>
 <option value="Vendor Tools">Vendor Tools </option>
 <option value="Company Links">Company Links</option>
 <option value="Operations"> Operations</option>
 </cfselect>      
 <p> Report Description </p>    
  <cftextarea name="reportDescrip" size="20" maxlength="200" label="Report Description"
 value=" Enter Report Description" required="yes" id="reportDescrip" width="600" height="250">
 </cftextarea>
 <br />
 <br />
 <cfinput type="button" name="createReport" label="Add New Report" value="Add New Report" id="createReport"/>
 </cfform>

有人可以告诉我我可能做错了什么，它不起作用。

更新：我打开了 IE 控制台，脚本有一个 SCRIPT1010：此行的预期标识符错误： **成功：函数（）{

警报。("You successfully added a new report to the system") }**

更新：删除了CF flash表格，并指定HTML为cfform中的表格类型。 AJAX 通话仍然无效。

Answer 1

查看您的代码，您的 cfform 上有 format="flash"。这将使用 flash 而非 HTML 呈现表单。因此，jQuery 无法读取表单值，因为没有 HTML 表单元素。如果将其更改为 format="html"，那么至少您将拥有一个 HTML 表单，然后您可以开始深入研究 JavaScript 代码并解决这些问题。

唯一需要注意的是您的 jQuery 代码。确保如果您使用 # 标志，则您不在 cfoutput 块内，否则 Javascript 将不会按预期呈现。

Answer 2

我能够解决与解析 cfc 路径有关的问题。工作代码如下。

解法：

AJAX:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script language="javascript">

    $(document).ready(function() {
        $("#createReport").click(function(f) {
            var getReportName = $("input#reportName").val();
            var getReportPath = $("input#reportPath").val();
            var getReportDesc = $("input#reportDescrip").val();
            //var getCategory   = $("input#categoryBox").val();


            $.ajax({
                type:"POST",
                url: "http://10.11.2.60/testFolder/bidirectionalreporting/codetest/components/coldfusionFunction.cfc?method=testFunc&returnformat=json",
                dataType: "JSON",
                data:{ 
                        reportName: getReportName,
                        reportPath: getReportPath,
                        reportDescrip: getReportDesc
                        //categoryBox: getCategory

                },
                success: function(result){
                    alert("You successfully added a new report to the system") } 
    });
        });
    });


</script>

冷熔:

<!--- CF AJAX function to create new report in DB--->
    <cffunction name="testFunc"  access="remote" description="tests the AJAX functionality and query">     <!--- Function takes in variables from CF page and AJAX call --->
    <cfargument name="mathVariable" default="8978" type="any">                                             <!--- This is just a test argument to verify ajax works before adding new fields--->
    <cfargument name="reportName" default="" type="any">                                                   <!--- This argument maps to the like named form field and is passed through AJAX call--->                
    <cfargument name="reportPath" default="" type="any">                                                   <!--- This argument maps to the like named form field and is passed through AJAX call--->
    <cfargument name="reportDescrip"  default="" type="any" >                                              <!--- This argument maps to the like named form field and is passed through AJAX call--->
    <cfargument name="categoryBox" default="Vendor Management" type="any">                                 <!--- This argument maps to the like named form field and is passed through AJAX call--->

    <cfquery name="qryTest" datasource="First_Title_Main_Dev">                                              <!--- Query creates a new report in the master report list table--->
     INSERT INTO Report_Master_List (Report_Name, URL, Report_Desc, Category)

         VALUES (<cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.reportName#">,                  <!--- report name form field references Report_Name column--->
                <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.reportPath#">,                   <!--- report path form field references ReportPath column--->
                <cfqueryparam cfsqltype="cf_sql_varchar" value="#arguments.reportDescrip#">,                <!--- report descrip form field references ReportDescrip column --->
</cffunction

将 Coldfusion 表单值传递给 javascript 和 CFC，代码不工作

Passing Coldfusion Form Values to javascript and CFC , code not working

javascript

ajax

coldfusion

jquery