Pass data to CFC Function with JSON via AJAX Post

Question

I have a jquery submit event that collects form data and puts it into a jquery object. I want to take that jquery object and pass it to a coldfusion web service where I can use it to update an xml file. I do not want a response from the web service I just want to send it to the web service and fiddle with the data from there.

Client Side/JQuery:

$("#update").on('submit',function() {
    $linkName = $('#update').find('#linkName').val();
    $linkURL = $('#update').find('#linkURL').val();
    $linkInfo = $('#update').find('#linkDesc').val();
    $numOfLinks = $('.linkSection').length;
    if ($numOfLinks > 0){
    // Here the sub link names and urls put into an array
        $subLinkName = [];
        $subLinkURL = [];   
        $('.linkSection').each(function(index, element) {
            $subLinkName.push($(this).find('#subLinkName').attr('value'));
            $subLinkURL.push($(this).find('#subLinkURL').attr('value'));

            $data = {linkName: $linkName, linkURL: $linkURL, linkID : $linkID, linkDescription : $linkInfo, subLinkNames : $subLinkName, subLinkURLs : $subLinkURL}; 
        });
    // Optionally, you could put the name and url in the array object here but not sure which is better to do   
        //$subLink =[]; 
        //$('.linkSection').each(function(index, element) {
            //$subLink.push($(this).find('#subLinkName').attr('value'));
            //$subLink.push($(this).find('#subLinkURL').attr('value'));
        //});   
    }else{
        alert('hey');
        $data = {linkName: $linkName, linkURL: $linkURL,  linkID : $linkID, linkDescription : $linkInfo};
    }
    //alert($data);
    $.ajax({
        type: "POST",
        data: {
            method: "UpdateRegularLink",            
            returnFormat:"json",            
            formData: JSON.stringify($data)
        },
        url: "../../WebServices/RMSI/rmsi.cfc",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        beforeSend: function() {                    
            alert('about to post');
        },
        error: function(data,status,error){
            alert(data+': '+status+': '+error);
        },
        done: function(data){
            alert('success');
        }
    });
});

Server Side/CFC:

<cfcomponent>

    <cfset xmlpath = "e:\webapps\NRCNewsApps\RMSI\xml" />

    <cffunction name="UpdateRegularLink" access="remote" output="false" >
    <cfargument name="formData" required="true" type="string"  />
    <cfset var cfStruct = DeserializeJSON(arguments.formData)>

    <!--- now I want to use the data --->
</cffunction>   

</cfcomponent>

In Chrome I get "Unauthorized" In firebug I get "unexpected character"

Just ask me and I will add more information that you need.

Answer 1

So when you stringify the data to be passed to coldfusion, coldfusion doesn't understand it and adds all kinds of characters to your string making it unreadable by coldfusion.

Had to use toString() as an intermediary method call since the JSON packet comes across as a byte array (binary data) which needs to be turned back into a string before ColdFusion can parse it as a JSON value.

also good call @Chandan Kumar for adding the method to the end of the url instead of passing it in with the data. I actually kept flipping on that piece but that ultimately was how it worked so KUDOS to you

var ajaxResponse = $.ajax({
                        type: "POST",
                        url: "../../WebServices/RMSI/rmsi.cfc?method=UpdateRegularLinkmethod=,
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify($data),
                        //dataType: "json",
                        beforeSend: function() {                    
                            //alert($data);
                        },
                        error: function(data,status,error){
                            alert(data+': '+status+': '+error);
                        }
                    }).done(function(entry) {
                        alert('success');
                    });


                    ajaxResponse.then(
                        function( apiResponse ){

                        // Dump HTML to page for debugging.
                        $( "#response" ).html( apiResponse );

                        }
                    );

THE CFC

<cfcomponent>
  <cffunction name="UpdateRegularLink" access="remote" returntype="xml">

    <cfset requestBody = toString( getHttpRequestData().content ) />

    <!--- Double-check to make sure it's a JSON value. --->
    <cfif isJSON( requestBody )>

        <!--- Echo back POST data. --->
        <cfdump
            var="#deserializeJSON( requestBody )#"
            label="HTTP Body"
        />

    </cfif>


  </cffunction>
</cfcomponent>