如何使用 JQuery 在 html 页面中显示 JSON 输出？答案

【问题标题】：How display JSON output in html page using JQuery?如何使用 JQuery 在 html 页面中显示 JSON 输出？
【发布时间】：2019-11-17 17:01:24
【问题描述】：

这就是我使用 Python 请求发出 API 请求的方式：

mainurl = 'http://gw.api.alibaba.com/openapi/param2/2/portals.open/api.listPromotionProduct/'
api_key = '9420'
fields = '?fields=productId,productUrl,productTitle,salePrice,originalPrice,imageUrl'
payload = {
        'keywords': "women",
        'pageSize': "40",
        'language': 'en',
        'sort': 'volumeDown',
        'isFreeShip': 'y',
        'isFavorite': 'y',
        'pageNo': "1"
    }
urlx = mainurl + api_key + fields
r = requests.get(urlx, params=payload)
print(r.content)

运行时返回长 JSON 输出：

{'result': {'commissionRate': '5.00%', 'originalPrice': 'US $1.21', ......}, 'currentPageNum': 0, 'errorCode': 20010000, 'totalPageNum': 0}

这就是我尝试使用 JQuery 发出 API 请求的方式：

## index.html ##
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="orders">

    </div>

<script src="js/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="js/main.js" type="text/javascript" charset="utf-8" async defer></script>
</body>
</html>

## main.js ##

$(function (){

    var $orders = $('#orders');

    $.ajax({
        type: 'GET',
        url: 'http://gw.api.alibaba.com/openapi/param2/2/portals.open/api.listPromotionProduct/9420?fields=productUrl,originalPrice,productTitle&keywords=women',
        success: function(orders){
            $.each(orders, function(i, order){
                $orders.append('<li> products :' + order.totalResults + '</li>');
            });
        }
    });
});

我在浏览器中得到了这个结果：

产品：5291514

这是 JSON 输出：

{"result":{"totalResults":5275965,"products":[{"productTitle":"S-XL Plus Size Tunic Autumn ...}

如何在我的html页面中显示productTitle？

【问题讨论】：

您正在获取不同的字段并且没有传递任何有效负载。为什么你会期望得到与你的 python 脚本相同的结果？
你有一个错误代码 - 对你有好处！您是否研究过（在 API 文档中）它的含义？
网址不一样。你在哪里看到keywords=women 在你的网址中？
未定义来自您的 orders.append 行中的 order.result 对象。我建议您在浏览器中查看调试并检查该对象，并将 orders.result 与您认为您从 python 发送的 json 进行比较。
@Andy Stagg 我重新表述了我的问题并修复了网址

标签： javascript jquery ajax api

【解决方案1】：

如果我很好地理解了这个问题，这就是你想要展示的？

$.each(orders, function(i, order){
    $orders.append('<li> products :' + order.products[0].productTitle + '</li>');
});

【讨论】：