0

我能够使用以下代码从 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 对其进行样式设置。我只需要一些数据，例如交易标题、临界点、价格等。在此先感谢

4

3 回答 3

3

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

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

jsFiddle 演示

$(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);
        });
    });
});
于 2013-08-14T02:55:10.600 回答
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)
    })
});

演示：小提琴

于 2013-08-14T02:44:54.730 回答
-1

尝试淘汰赛。您可以轻松地将您的 Ajax 转换为 javascript 中的视图模型，并使用样式将其显示在屏幕上。

于 2013-08-14T02:43:45.773 回答