将json处理为html

Question

我能够用下面的代码从groupon api中提取这些交易

$.ajax({
type: 'GET',
url: 'https://api.groupon.com/v2/deals.json?    client_id=b252ad3634a4ab2985b79d230ccc4e49a3ea9d19&show=all&division_id=los-angeles',
async: false,
jsonpCallback: 'jsonCallback',
contentType: "application/json",
dataType: 'jsonp',
});

现在，我如何将交易信息添加到一个html div，以便我可以使用css风格。我只需要一些数据，如交易标题，临界点，价格等。提前感谢

Answer 1

您需要为ajax请求注册一个成功的回调，然后使用从服务器返回的deals数据来呈现数据。

从服务器返回的数据具有许多属性，如type、finePrint、announcementTitle、dealUrl、highlightsHtml、pitchHtml、placementPriority、redemptionLocation、startAt、status、endAt等等，您可以使用它创建视图表示并将其附加到视图中。

在下面的示例中，我使用highlightsHtml显示交易的高光

<div id="result">
</div>

然后

var $result = $('#result')
$.ajax({
    type: 'GET',
    url: 'https://api.groupon.com/v2/deals.json?client_id=b252ad3634a4ab2985b79d230ccc4e49a3ea9d19&show=all&division_id=los-angeles',
    async: false,
    jsonpCallback: 'jsonCallback',
    contentType: "application/json",
    dataType: 'jsonp',
}).done(function(data){
    console.log(data)
    $.each(data.deals, function(idx, deal){
        var html = '<div class="deal"><h3>' + deal.announcementTitle+ '</h3><div class="fineprint">' + deal.finePrint + '</div><div class="footer"><img src="' + deal.mediumImageUrl + '"/></div></div>'
        $result.append(html)
    })
});

演示：小提琴

Answer 2

async: false选项是不推荐的，并且违背了AJAX的目的。无论如何，JSONP不支持同步调用。只需使用getJSON方法检索数据，然后在成功的回调中将其写入DOM。

通过查看返回的数据(通过使用console.log将其记录到控制台，并打开浏览器的JS控制台)，以及使用jQuery API中列出的函数，您可以不断地调整数据，直到达到预期的效果。下面的代码查看返回对象的一些属性，并使用append、prepend和html方法将它们粘贴到DOM中。

http://jsfiddle.net/kr26w/2/

$(function () {
    $.getJSON("https://api.groupon.com/v2/deals.json?callback=?", {
        client_id: "b252ad3634a4ab2985b79d230ccc4e49a3ea9d19",
        show: "all",
        division_id: "los-angeles"
    })
    .done(function (data) {
        console.log(data);
        // do whatever processing you need to do to the data
        // right here, then drop it in the div
        $.each(data.deals, function (i, v) {
            $title = $("<h2/>", {
                html: v.title,
                class: "heading"
            });
            $img = $("<img/>", {
                src: v.mediumImageUrl
            });
            $deal = $("<div/>", {
                html: v.highlightsHtml + v.pitchHtml
            });
            $("#main").append($deal);
            $deal.prepend($title, $img);
        });
    });
});

Answer 3

试试击打。您可以轻松地将Ajax转换为javascript中的视图模型，并通过样式在屏幕上显示它。