ColdFusion AJAX: Element is undefined in arguments

Question

I'm doing some AJAX ColdFusion testing and I have an issue while sending data to ColdFusion server using AJAX. Here is the HTML code I have:

<form method="post">
    <p>
        <input type="text" id="user_name" name="name" placeholder="name" value="test" />
        <input type="text" id="user_email" name="email" placeholder="email" value="abc" />
    </p>
    <input type="button" value="Find Out" class="ajax_form"/>
</form>

<p id="insert"></p>

JS:

$(document).ready(function (){
    $(".ajax_form").click(function (){
        var that = $(this).parent(),
            url = "ajax.cfc",
            type = that.attr('method'),
            test = {};

        that.find('[name]').each(function(index, value){
            var that = $(this),
                name = that.attr('name'),
                value = that.val();

            test[name] = value;
        });

        console.log(test.name);

        $.ajax({
            url: url,
            type: type,
            data: {
                method: "testCheck",
                name: test.name,
                email: test.email,
                array: test
            },

            success: function (responce){
                document.getElementById('insert').innerHTML = responce;
            },
            error: function (xhr, textStatus, errorThrown){
                alert(errorThrown);
            }
        });
    });
});

ajax.cfm is really simple and looks like this.

<cfcomponent output="false">
    <cffunction name="testCheck" access="remote" returnformat="plain" returnType="string" output="false">
        <cfargument name="name" type="string" required="false" />
        <cfargument name="email" type="string" required="false" />
        <cfargument name="array" required="false" />

        <cfset var string = " " />

        <cfif (arguments.name) eq "test">
            <cfset string = arguments.array/>
        <cfelse>
            <cfset string = "incorrect" />
        </cfif>

        <cfreturn string />
    </cffunction>
</cfcomponent>

The problem is that cf argument isn't defined (the error I get: "500 (Element ARRAY is undefined in ARGUMENTS)") or gets default value when I set it. I have a guess that this is about data type of the object I'm sending, but I can't come up with any solution. Is it possible at all to use this type of data as cfargument is this case?

Answer 1

The error is mainly due to following reasons:

1. array as an object(JSON):

You are sending array as an object so the request will be made with a contentType of application/x-www-form-urlencoded by jQuery (as you have not explicitly specified it).

Hence, the object(array in the case) will be serialized into name/value pairs and will be appended in the URL so, the server will get following arguments(which was not desired):

array[name] = 'test'

array[email] = 'abc'

So, you have to serialize the data from client side and then deserialize at the server side like this:

   $.ajax({
        url: url,
        type: type,
        data: {
            method: "testCheck",
            name: test.name,
            email: test.email,
            array: JSON.stringify(test) <--- Serialize here -->
        }

        , success: function (responce){
            document.getElementById('insert').innerHTML = responce;
        }
        , error: function (xhr, textStatus, errorThrown){
            alert(errorThrown);
        }
    });

<--- Deserialize --->
<cfset local.array = deserializeJSON(arguments.array)>

2. argument array has no default

The argument array has no default value and was not passed during the request(due to the above mentioned reason) so, it would be undefined.