显示来自jquery ajax调用的json响应

时间:2012-05-18 20:19:42

标签: jquery ajax json

我的ajax调用成功返回数据库中的数据,但我无法弄清楚如何解析json并正确显示它。这是我的ajax电话:

$('#cardText').change(function(){
            if($('#cardText').val().trim().length == 9)
                {
                    $.ajax({

                        url: 'components/Person.cfc',

                        //GET method is used
                        type: "POST",

                        //pass the data        
                        data: {
                            method: "getGroup",
                            uid: $('#cardText').val(),
                            },
                        datType: "json",

                        success: function(response) {

                            var resp = $.trim(response);
                            $('#form_result').html(resp);
                        },

                        error: function(jqXHR, exception) {
                            if (jqXHR.status === 0) {
                                alert('Not connect.\n Verify Network.');
                            } else if (jqXHR.status == 404) {
                                alert('Requested page not found. [404]');
                            } else if (jqXHR.status == 500) {
                                alert('Internal Server Error [500].');
                            } else if (exception === 'parsererror') {
                                alert('Requested JSON parse failed.');
                            } else if (exception === 'timeout') {
                                alert('Time out error.');
                            } else if (exception === 'abort') {
                                alert('Ajax request aborted.');
                            } else {
                                alert('Uncaught Error.\n' + jqXHR.responseText);
                            }
                        }
                }); 
            }
        });

它返回以下内容(div id =“form_result”),但我无法弄清楚现在如何正确显示数据:

{"COLUMNS":["PLAN","NAME","ID","ISSUE","TYPE","LASTUSED","BALANCE"],"DATA":[["DINING STAFF CAFE 1919 ","YOUNG, MARIA ",8.03976343E8,"2001-04-02",2.0,"2012-01-27",1]]}

任何帮助将不胜感激! 杰拉德

4 个答案:

答案 0 :(得分:0)

由于您在客户端获得JSON,您可以将其提供给一些理解该数据的JS插件,或者使用模板引擎自己显示它们。

您需要一个体面的模板引擎。

结帐http://api.jquery.com/category/plugins/templates/http://handlebarsjs.com/https://github.com/leonidas/transparency

答案 1 :(得分:0)

你可以通过这种方式解析json数据来实现它

var ReturnedData = jQuery.parseJSON(response);

然后你可以像一个简单的对象和数组一样访问数据,即

var Col1 = ReturnedData.COLUMNS[0];  // will provide you first COLUMN value i.e. "PLAN"
var Data1= ReturnedData.DATA[0];  // will provide you first DATA value i.e. "DINING STAFF     CAFE 1919"

以上两行只是一个如何获取数据的示例

答案 2 :(得分:0)

看来你只需要对从服务器返回的JSON数据做一些事情。如果你想把它解析成一个更合理的格式,比如哈希,请看我的小提琴:http://jsfiddle.net/skamansam/T7WbK/25/。如果您只是想告诉用户他/她提交的数据是否正确,请更改以下行:

$('#form_result').html(resp);

$('#form_result').html("Form submitted successfully!");

理想情况是,您将服务器响应更改为有意义的内容,例如html响应而不是json。这似乎更像是一个偏好问题,而不是技术性或协议。

答案 3 :(得分:0)

似乎“数据”中有额外的逗号 尝试在uid: $('#cardText').val()

之后删除逗号