使用jQuery显示JSON数据

时间:2013-11-15 17:38:33

标签: jquery asp.net-mvc json callback

我在这里遇到一点麻烦。我有一个调用返回一些格式正确的JSON。我在JSON Lint上查了一下。

JSON: {"facilities":[{"facilityId":"123","facilityName":"Pizza Hut"}]}

我可以使用以下代码在警报框中查看该数据:

 $(function () {
    var availableTags = [
        // TODO
    ];
    $("#tags").autocomplete({
        source: availableTags
    });
    $("#tags").focusout(function () {
        var result = null;
        $.ajax({
            beforeSend: function() {
                alert("Testing");
            },
            url: "FacilitiesAsync",
            success: function(data) {
                result = data;
            },
            complete: function () {
                alert(result);
            }
        });
    });
});

然而,当我尝试这段代码时,我从来没有看到过processFacilities函数。我不确定我做错了什么。 $ getJSON DOES可以工作,但回调函数永远不会执行。

   $.getJSON('FacilitiesAsync','sourceDb=sampleDb',processFacilities);
    function processFacilities(data) {
    var infoHtml = '';
    $.each(data, function(facilities, facilityInfo) {
        infoHtml += '<p>Facility: ' + facilityInfo + '<br></p>';
    }); // end of each

    $('#info').html(infoHtml);
};

我不是想同时运行这两个。当我测试另一个时,我评论了一个。这些脚本位于我的MVC4应用程序的一个块中。

我的div

<div id="info"></div>

2 个答案:

答案 0 :(得分:1)

你错过了函数内的facilityName。试试这个:

   $.getJSON('FacilitiesAsync','sourceDb=IPACS',processFacilities);
    function processFacilities(data) {
    var infoHtml = '';
    $.each(data, function(facilities, facilityInfo) {
        infoHtml += '<p>Facility: ' + facilityInfo.facilityName + '<br></p>';
    }); // end of each

    $('#info').html(infoHtml);
};

答案 1 :(得分:0)

我认为两者的混合将做得恰到好处

        $("#tags").focusout(function () {
        var result = null;
        $.ajax({
            beforeSend: function() {
                alert("Testing");
            },
            url: "FacilitiesAsync",
            success: function(data) {
                  var infoHtml = '';
                  $.each(data, function(facilities, facilityInfo) {
                       infoHtml += '<p>Facility: ' + facilityInfo + '<br></p>';
                  }); // end of each

                  $('#info').html(infoHtml);
            },
            complete: function () {

            }
        });
    });
});