$ .ajax ColdFusion cfc JSON Hello World - PullRequest
Новая
       11

$ .ajax ColdFusion cfc JSON Hello World

1 голос
/ 01 апреля 2010

Я упростил этот пример настолько, насколько смог. У меня есть удаленная функция: 

<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>

И используя метод jQuery $ .ajax, я хотел бы составить неупорядоченный список всех. 

    <!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>

Часть, где я потерялся, - это то, где я зацикливаюсь на данных. Я предпочитаю использовать метод jQuery $ .ajax, потому что я понимаю, что $ .get и $ .post не имеют перехвата ошибок.

Я не знаю, как обрабатывать JSON, возвращенный из cfc.

Ответы [ 4 ]

8 голосов
/ 05 апреля 2010

Похоже, что результат в формате JSON (проверьте документы http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=Tags_f_21.html). "Если вы укажете returnformat =" json "и функция вернет запрос, ColdFusion сериализует запрос в объект JSON с двумя записями, массивом имен столбцов и массивом данных столбцов. Для получения дополнительной информации см. SerializeJSON." http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=Tags_f_21.html

Таким образом, первый массив (data.COLUMNS должен быть массивом имен столбцов. Data.COLUMNS [0] даст вам имя первого столбца. Data.DATA [0] даст вам первую строку запроса .

Хорошим трюком является использование console.log (data) в chrome или firebug console для просмотра данных в их структурированном виде.

Я не проверял это, но оно должно быть близко. Просто создание базовой таблицы из данных. 

$.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');
    }
});
4 голосов
/ 01 апреля 2010

Самый простой способ - визуально увидеть, как возвращаются данные JSON. Тогда не должно быть слишком сложно пересечь объект JS. Вы пробовали визуализацию JSON? http://chris.photobooks.com/json/default.htm

Если все, что вам нужно, это PersonID, вы также можете вернуть массив или список PersonID из CF.

Или, при желании, вы можете попросить CF вернуть обычный текст со всеми сгенерированными <li>. Сообщение, передаваемое через ajax, будет больше, но у вас будет меньше кода JS для обслуживания. CFML легче поддерживать, верно? :)

4 голосов
/ 01 апреля 2010

Я не очень знаком с ColdFusion, но вы пытались установить тип данных в 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');
    }
});

Это должно сработать, если возвращаемые вами данные напоминают что-то вроде: 

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

Если вышеприведенное не сработает, если вы сможете показать необработанные данные JSON, возвращаемые по вашему запросу, я могу легко это исправить.

Также не уверен, что это было в вашем коде, но вы пропустили точку с запятой в конце строки цикла for.

2 голосов
/ 01 апреля 2010

Опции:

В вашем случае я бы поставил 

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

НО

это то же самое, что и returntype="string" returnformat="plain" + <cfreturn serializeJSON(query) > и это проблема с точки зрения jQuery, потому что вы получаете уродливый JSON, даже если вы используете serializeJSON srerialization по столбцам.

  1. Вы можете создать строку JSON вручную через cfloop и сцепление: /
  2. Используйте cfjson.cfc, который переопределяет serializeJSON
  3. Перейдите на сайт Бена Наделя и возьмите его метод toJSON и измените его так, как вам нужно.

Другая вещь - serializeJSON, возвращает ключи в верхнем регистре, поэтому обратите внимание, используйте lcase () или напишите .LIKETHIS в js.

PS: попробуйте это для динамического создания HTML в jQuery: 

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

затем добавьте метод к родительскому элементу

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...