从浏览器向 HTML 站点上的 JSON API POST 请求

Question

我正在尝试使用 ajax 来查询超市的搜索 API，并以名称、价格和单价进行回复。要使用 Python 请求执行此操作，我将使用以下代码：

import requests
import json

payload ={
   'Filters':'[]',
   'IsSpecial':'false',
   'Location':'/shop/search/products?searchTerm=banana',
   'PageNumber':'1',
   'PageSize':'24',
   'SearchTerm':'banana',
   'SortType':'TraderRelevance'
}

url = "https://www.woolworths.com.au/apis/ui/Search/products"

data = requests.post(url, json=payload).json()

print(data['Products'][0]['Name'])
print("$", data['Products'][0]['Products'][0]['Price'], "0", sep='')
print(data['Products'][0]['Products'][0]['CupString'])
print()

print(data['Products'][1]['Name'])
print("$", data['Products'][1]['Products'][0]['Price'], "0", sep='')
print(data['Products'][1]['Products'][0]['CupString'])
print()

print(data['Products'][2]['Name'])
print("$", data['Products'][0]['Products'][2]['Price'], "0", sep='')
print(data['Products'][0]['Products'][2]['CupString'])
print()

等等……

我想要做的是将这个 python 代码复制到可以在网络浏览器中使用的东西。这有可能吗？

Answer 1

浏览器中的语法几乎相同，但当然是 JavaScript，而不是 Python。

您可以使用request-promise NPM module:

const request = require('request-promise')

let url = "https://www.woolworths.com.au/apis/ui/Search/products"
let payload = {
  'Filters': '[]',
  'IsSpecial': 'false',
  'Location': '/shop/search/products?searchTerm=banana',
  'PageNumber': '1',
  'PageSize': '24',
  'SearchTerm': 'banana',
  'SortType': 'TraderRelevance'
}

request
    .post({
      url,
      json: payload,
      headers: {'Content-Type': 'application/json'}
    })
    .then(res => console.log(res))
    .catch(err => console.log(err))

您需要在 then 方法中打印或解析数据，因为 JavaScript 是异步执行的，而不是像 Python 那样同步执行。

如何在浏览器中包含 JavaScript 模块的问题是一个单独的问题，但您可以在 this site 和 Google 上找到大量示例。

还有fetch API，在这一点上具有良好的浏览器支持，并且不需要您引入外部模块。语法非常相似，你可以在MDN here阅读更多内容。