Jquery Ajax 方法使用多个 json 对象但不使用单个 json 对象答案

【问题标题】：Jquery Ajax method working with multiple json object but not with single json objectJquery Ajax 方法使用多个 json 对象但不使用单个 json 对象
【发布时间】：2013-07-19 21:16:20
【问题描述】：

当我发送 json 对象数组时，我的 jquery ajax 方法能够解析内容并在 jquery 的 listview 中显示数据，但是当我只有一个对象时，我的同一个 jquery ajax 方法无法解析数据。

这里是我的 json 对象数组：

{"menuService":[{"idmenu":"0","itemCatagory":"Main Course","itemDescription":"Food from UP","itemImagePath":"http://localhost:8080/fotservice/ItemImage?id=Steam Rice","itemName":"Steam Rice","rate":"100.5","subItemName":"Half Plate Steam Rice","subItemNameRate":"100.5"},{"idmenu":"5","itemCatagory":"Main Course","itemDescription":"tasty lunch","itemImagePath":"http://localhost:8080/fotservice/ItemImage?id=Lunch Combo(raita,rice,dal,salad)","itemName":"Lunch Combo(raita,rice,dal,salad)","rate":"123.0","subItemName":"lunch(dal,rice)","subItemNameRate":"100.5"}]}

这是我的单个 json 对象：

{"menuService":{"idmenu":"2","itemCatagory":"xyz","itemDescription":"fghjkl;","itemImagePath":"http://localhost:8080/fotservice/ItemImage?id=Dal makhni","itemName":"Dal makhni","rate":"121.5","subItemName":"Half plate Dal makhni","subItemNameRate":"121.56"}}

这是我的 jquery ajax 方法：

$.ajax({
    url: "http://localhost:8080/fotservice/rest/menu/"+cat+"/items",  
    type: 'GET',
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    success: function( response ) {
        var markup = "";
        $.each(response.menuService, function(index, result) { 
            var $template = $('<div><li> <a data-transition="slide" href="desc.html?cat='+result.itemName+'" rel="external" > <img class="profile"> <p class="from"> </p><p class="tweet"> </p></li></a></div>');
            $template.find(".profile").attr("src", result.itemImagePath);
            $template.find(".from").append(result.itemDescription);

            markup += $template.html();
        });
        $( "#tweet-list" ).append(markup).listview( "refresh", true ); // The true parameter indicates we want to refresh the entire list, not just the list items. 

    },
    timeout: 6000,  // Timeout after 6 seconds
    error: function(jqXHR, textStatus, errorThrown) {
        console.log("Error, textStatus: " + textStatus + " errorThrown: "+ errorThrown);

        $.mobile.hidePageLoadingMsg();

        //show error message
        $( "<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h1>"+ $.mobile.pageLoadErrorMessage +"</h1></div>" )
            .css({ "display": "block", "opacity": 0.96, "top": 100 })
            .appendTo( $.mobile.pageContainer )
            .delay( 800 )
            .fadeOut( 1000, function() {
                $( this ).remove();
            });
    }
});

我尝试了 jquery getjson 方法，但这也是同样的行为。

【问题讨论】：

$.each 无法像处理对象 ({...}) 一样处理对象列表 ([ {...}, {...}])，因为在后一种情况下它会遍历其键。你能发送一个对象的列表吗？

标签： jquery ajax json

【解决方案1】：

var mns = response.menuService;

if (mns&& !mns.length) mns=[mns];
$.each(mns...

【讨论】：

【解决方案2】：

检查 response.menuService 是否为 jquery 类型的数组，如果不是，则创建一个：

var success = function(response) {
    var markup = "";
    var arrayResponse;
    console.log(response.menuService);
    if ($.type(response.menuService) !== 'array') {
        var arrayResponse = [];
        arrayResponse.push(response.menuService);
    } else {
        arrayResponse = response.menuService; 
    }
    console.log(arrayResponse);
    $.each(arrayResponse, function(index, result) { 
        $('#list').append('<div>' + result.idmenu + '</div>');
    });
};

var response = {"menuService":[{"idmenu":"0"}]};

success(response);

var response = {"menuService":{"idmenu":"2"}};

success(response);

我做了一个 js fiddle 以便你测试它：http://jsfiddle.net/U72p2/

【讨论】：

【解决方案3】：

您可以使用Array.isArray 检查它是否是一个数组，如果不是，则将其包装在一个数组中，以便$.each 持续工作

success: function( response ) {
    var markup = "";
    var menuService = Array.isArray(response.menuService) ? response.menuService : [response.menuService];

    $.each(menuService, function(index, result) { 
        ...
    });

    ...

【讨论】：

【解决方案4】：

这样改json格式试试

{"menuService":[{"idmenu":"2","itemCatagory":"xyz","itemDescription":"fghjkl;","itemImagePath":"http://localhost:8080/fotservice/ItemImage?id=Dal makhni","itemName":"Dal makhni","rate":"121.5","subItemName":"Half plate Dal makhni","subItemNameRate":"121.56"}]}

或者不要使用each，直接这样访问值

response.menuService.itemImagePath

如果您使用相同的json 格式，则更新您的success 处理程序，如下所示：

success: function(response) {
    var markup = "";
    var $template = $('<div><li> <a data-transition="slide" href="desc.html?cat=' + response.menuService.itemName + '" rel="external" > <img class="profile"> <p class="from"> </p><p class="tweet"> </p></li></a></div>');
    $template.find(".profile").attr("src", response.menuService.itemImagePath);
    $template.find(".from").append(response.menuService.itemDescription);
    markup += $template.html();
    $("#tweet-list").append(markup).listview("refresh", true); // The true parameter indicates we want to refresh the entire list, not just the list items. 
}

【讨论】：