$.ajax ColdFusion cfc JSON Hello World

问题

I've simplified this example as much as I can. I have a remote function:

<cfcomponent output="false">
<cffunction name="Read" access="remote" output="false">
    <cfset var local = {}>

    <cfquery name="local.qry" datasource="myDatasource">
    SELECT PersonID,FirstName,LastName FROM Person
    </cfquery>
    <cfreturn local.qry>
</cffunction>
</cfcomponent>

And using the jQuery $.ajax method, I would like to make an unordered list of everyone.

    <!DOCTYPE HTML>
    <html>
    <head>
    <script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("jquery", "1");
    </script>
    <script type="text/javascript">
    jQuery(function($){
    $.ajax({
            url: "Remote/Person.cfc?method=Read&ReturnFormat=json",
            success: function(data){
                var str = '<ul>';
// This is where I need help:
                for (var I=0; I<data.length; I++) {
                    str += '<li>' + I + data[I][1]+ '</li>'
                }
                str += '</ul>';
                $('body').html(str);
            },
            error: function(ErrorMsg){
               console.log("Error");
            }
        });
    });
    </script>
    </head>
    <body>
    </body>
    </html>

The part where I'm lost is where I'm looping over the data. I prefer to the use jQuery $.ajax method because I understand that $.get and $.post don't have error trapping.

I don't know how to handle JSON returned from the cfc.

回答1:

Looks like the result is in json format(check the docs http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=Tags_f_21.html). "If you specify returnformat="json" and the function returns a query, ColdFusion serializes the query into a JSON Object with two entries, and array of column names, and an array of column data arrays. For more information see SerializeJSON." http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=Tags_f_21.html

So the first array(data.COLUMNS should be an array of column names. data.COLUMNS[0] would give you the name of the first column. data.DATA[0] would give you the first row of the query.

A nice trick is to use console.log(data) in chrome or firebug console to view the data in it's structured form.

I didn't test this, but it should be close. Just generating a basic table from the data.

$.ajax({
    url: 'Remote/Person.cfc?method=Read&ReturnFormat=json',
    dataType: 'json',
    success: function(response) {
        var str = '<table><tr>';
        var i;
        var j;

        //loop over each column name for headers
        for (i = 0; i < response.COLUMNS.length; i++) {
              str += '<th>' + response.COLUMNS[i] + '</th>';
          }
        }
        str += '</tr>';

        //loop over each row
        for (i = 0; i < response.DATA.length; i++) {
          str += '<tr>';
          //loop over each column
          for (j = 0; j < response.DATA[i].length; j++) {
              str += '<td>' + response.DATA[i][j] + '</td>';
          }
          str += '</tr>';
        }
        str += '</table>';

        $('body').html(str);
    },
    error: function(ErrorMsg) {
       console.log('Error');
    }
});

回答2:

The easiest way would be to visually see how the returned JSON data is structured. Then it shouldn't be too hard to transverse the JS object. Have you tried JSON Visualization? http://chris.photobooks.com/json/default.htm

If all you need is the PersonID, you can return array or list of PersonID from CF as well.

Or optionally, you can ask CF to return Plain text, with all the <li>'s generated. The message passed through ajax will be larger, but you'll have less JS code to maintain. CFML is easier to maintain, right? :)

回答3:

I'm not very familiar with ColdFusion but have you tried setting the data type to JSON?

$.ajax({
    url: 'Remote/Person.cfc?method=Read&ReturnFormat=json',
    dataType: 'json',
    success: function(response) {
        var data = response.DATA;
        var str = '<ul>';

        for (var I = 0; I < data.length; I++) {
            str += '<li>' + I + data[I][1] + '</li>';
        }

        str += '</ul>';

        $('body').html(str);
    },
    error: function(ErrorMsg) {
       console.log('Error');
    }
});

That should work if the data you're getting back resembles something like:

[["PersonID1", "FirstName1", "LastName1"],["PeronID2", "FirstName2", "LastName2"]] .. etc

If the above doesn't work if you could show the raw JSON data being returned by your request I should be able to easily fix it.

Also, not sure if it was in your code, but you missed a semi-colon at the end of the line in the for loop.

回答4:

Options :

In your case I'd put

<cffunction name="keywordAutoComplete" access="remote" 
            returntype="struct" returnformat="JSON" >

BUT

this does the same thing as returntype="string" returnformat="plain" + <cfreturn serializeJSON(query) > and that's a problem form jQuery point of view because you get ugly JSON even if you use serializeJSON srerialization by columns.

You can make JSON string manually through cfloop and concatenation :/
Use cfjson.cfc which overrides serializeJSON
Go to Ben Nadel's site and take his toJSON method and modify it somehow to fit your needs

Other thing is serializeJSON, returns uppercased keys, so pay attention, use lcase() or write .LIKETHIS in js.

PS: Try this for dynamic creaiton of html in jQuery:

var someLiElement = $('<li />').addClass('custom_class')
                 .text('Foo bar')
                 .attr('id', 'custom_id' + someInteger)

then append method to parent element

来源：https://stackoverflow.com/questions/2556476/ajax-coldfusion-cfc-json-hello-world

标签

jquery

json

coldfusion

cfc