Passing an array with jquery to a ColdFusion Component

Question

Before I start, I am admittedly very new to jquery, in fact I had no javascript background as of 3 months ago.

What I'm trying to accomplish is taking an array of information that I have available in jquery, and passing that array to a .cfc file where the information can be processed.

Here is my jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.json.min.js"></script>
<script type="text/javascript">
  $(function() {
    var mydata = {data:[1,2,3,4,5]};
                      
    $.post('test.cfc', {method:"handleArray", returnFormat:"plain", argumentCollection:   $.toJSON(mydata)}, function(res) {
    alert($.trim(res));
    });
  });
</script>

This was a piece of code a found from a post by Stephen Duncan Jr about 5 years ago.

Here's the cold fusion:

<cfcomponent>

<cffunction name="handleArray" access="remote" returnType="numeric">
<cfargument name="data" type="array" required="true">

  <cfquery name = "qTest" datasource="#REQUEST.dsn#" username="#REQUEST.dsu#" password="#REQUEST.dsp#"> 
    INSERT INTO test
      (value1, value2, value3, value4, value5)
    VALUES (
      <cfqueryparam cfsqltype="cf_sql_integer" value="#handleArray[1]#">,
      <cfqueryparam cfsqltype="cf_sql_integer" value="#handleArray[2]#">,
      <cfqueryparam cfsqltype="cf_sql_integer" value="#handleArray[3]#">,
      <cfqueryparam cfsqltype="cf_sql_integer" value="#handleArray[4]#">,
      <cfqueryparam cfsqltype="cf_sql_integer" value="#handleArray[5]#">)
    </cfquery>

<cfreturn arrayLen(arguments.data)>
</cffunction>

</cfcomponent>

This code is of course, just a test to get it working. But I need to pass about 40 variables to the cfc.

Any information that can be provided would be extremely appreciated, especially anything that explains why the result works.

Answer 1

@TimHowey there seems problem with your jquery post method. I think here is what you need to do:

<script type="text/javascript" src="jquery.json.min.js"></script>
<script type="text/javascript">
  $(function() {
      var mydata = "[1,2,3]";
      $.post('test.cfc', {
          method: "handleArray",
          returnFormat: "plain",
          data: mydata
      }, function(res) {
          alert("ok");
      });
  });
</script>

You are using a post method so every thing will be sent in the form scope. In your cfc, all you need to do is to deserialize the argument like this:

    <cffunction name="handleArray" access="remote" returnType="numeric">
        <cfargument name="data" type="any" required="true">
        <cfset var getArray = DeserializeJSON(arguments.data)/>
        <cfset var qTest = "">

        <cfquery name = "qTest" datasource="#REQUEST.dsn#" username="#REQUEST.dsu#" password="#REQUEST.dsp#"> 
            INSERT INTO test
            (value1, value2, value3)
            VALUES (
                <cfqueryparam cfsqltype="cf_sql_integer" value="#getArray[1]#">,
                <cfqueryparam cfsqltype="cf_sql_integer" value="#getArray[2]#">,
                <cfqueryparam cfsqltype="cf_sql_integer" value="#getArray[3]#">
          )
        </cfquery>

        <cfreturn arrayLen(getArray)>
    </cffunction>

EDIT

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.json.min.js"></script>
<script type="text/javascript">
  $(function() {
      var mydata = '[1,"keshav",3]';
      $.post('test.cfc', {
          method: "handleArray",
          returnFormat: "plain",
          data: mydata
      }, function(res) {
          alert("ok");
      });
  });
</script>