Skip to main content
A
Anonymous
August 28, 2012
Answered

JSON and CF integration

  • August 28, 2012
  • 1 reply
  • 1940 views

Hi~

I am very new to JSON and AJAX. I am using a jQuery plugin to post a form via AJAX/JSON to a .cfm page, and am trying to send back a response that can be used by jQuery.

This is my jQuery bit:

$.ajax({
                                    url: $(this).attr('action'),
                                    data: $(this).serialize(),
                                    type: $(this).attr('method'),
                                    dataType: 'json',
                                    success: function(data, status) {
                                        var content = data.message;
                                        this.set('content.text',content);
                                    },
             
                                    // Disable/Enable input elements
                                    beforeSend: function() { inputs.attr('disabled', 'disabled'); },
                                    complete: function() { inputs.removeAttr('disabled'); inputs[0].focus(); }
                                });

I can see that the request is going through successfully in Firebug (200 OK), but I have no idea how to manipulate the data on my CF page and then return it and use it in the code above. I know I can access the JSON data like this:

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

But after that, I am totally lost! Is this even possible? Please let me know, thank you.

    This topic has been closed for replies.
    Correct answer

    It may be what I was referring to in my note above.  CF will prefix the JSON data with "//" by default.  This is done to prevent cross-site scripting attacks.  So you do want it done, but that also means you need to deal with it in your code.  As you know, "//" in javascript is an inline comment.  So if your code does not remove those characters, the AJAX call see's it as a comment (or NULL).

    In my previous note I told you to reference the dataFilter attribute of the ajax call.  Check it out.  It allows you to do something like this to remove the first two characters (the //) of the returned data before processing.

    (along with other AJAX attribs...)

    dataFilter: function(data, type) {return data.substr(2)},


    Finally figured this out! The prefix option was turned off on our server, but it's good to know about that. In the end, this seems to return what I need it to:

    <cfscript>
        returnMessage = serializeJSON(local.message);
        writeOutput(returnMessage);
    </cfscript>

    Then, in the AJAX function I just have this:

    success: function(data, status) {
         var content = data;
         api.set('content.text', content);
    },
    error: function(data, status) {
         var content = data;
         api.set('content.text', content);
    }

    And my content updates!

    1 reply

    Carl Von Stetten
    Carl Von Stetten
    Brainiac
    August 28, 2012

    The AJAX request will hit the ColdFusion page in much the same way as if you did a normal form submit, rather than via AJAX.  All of the form data will either be in the page's URL scope (if the form's method is GET) or the page's FORM scope (if the form's method is POST).  So all the fields should be accessible either as URL.fieldname or FORM.fieldname.

    As far as manipulating the data, that totally depends on what you want to accomplish with it. You'll have to provide a lot more information for assistance with that.

    With regard to returning data, what are you expecting to have the ColdFusion page return?

    -Carl V.

    Message was edited by: Carl Von Stetten

    A
    Anonymous
    August 28, 2012

    Hi, thanks for your response!

    I have modified my AJAX call slightly:

    $.ajax({
                                        url: $(this).attr('action'),
                                        data: $(this).serialize(),
                                        type: $(this).attr('method'),
                                        dataType: 'json',
                                        success: function(data, status) {
                                            alert(status);
                                            var content = 'Email sent.';
                                            api.set('content.text', content);
                                        },
                                        error: function(data, status) {
                                            alert(status);
                                            var content = 'Email not sent.';
                                            api.set('content.text', content);
                                        }
                                    });

    On the CFM page (form action), I need to send an email based on the form data that was submitted. If that email is sent, I want to send Message A back to the calling function; if it doesn't I want to send Message B. I am fine with the CF code - that's not a problem - I just need to know how to post back to the AJAX function!

    Also, I thought my AJAX post was successful based on the Firebug output, but the alert() inside the error attribute is being fired when the form is submitted.

    A
    Anonymous
    Correct answer
    August 30, 2012

    It may be what I was referring to in my note above.  CF will prefix the JSON data with "//" by default.  This is done to prevent cross-site scripting attacks.  So you do want it done, but that also means you need to deal with it in your code.  As you know, "//" in javascript is an inline comment.  So if your code does not remove those characters, the AJAX call see's it as a comment (or NULL).

    In my previous note I told you to reference the dataFilter attribute of the ajax call.  Check it out.  It allows you to do something like this to remove the first two characters (the //) of the returned data before processing.

    (along with other AJAX attribs...)

    dataFilter: function(data, type) {return data.substr(2)},


    Finally figured this out! The prefix option was turned off on our server, but it's good to know about that. In the end, this seems to return what I need it to:

    <cfscript>
        returnMessage = serializeJSON(local.message);
        writeOutput(returnMessage);
    </cfscript>

    Then, in the AJAX function I just have this:

    success: function(data, status) {
         var content = data;
         api.set('content.text', content);
    },
    error: function(data, status) {
         var content = data;
         api.set('content.text', content);
    }

    And my content updates!

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices