整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
人已經(jīng)過原 Danny Markov 授權(quán)翻譯
在本教程中，我們將學(xué)習(xí)如何使用 JS 進(jìn)行AJAX調(diào)用。
術(shù)語AJAX 表示 異步的 JavaScript 和 XML。
AJAX 在 JS 中用于發(fā)出異步網(wǎng)絡(luò)請求來獲取資源。當(dāng)然，不像名稱所暗示的那樣，資源并不局限于XML，還用于獲取JSON、HTML或純文本等資源。
有多種方法可以發(fā)出網(wǎng)絡(luò)請求并從服務(wù)器獲取數(shù)據(jù)。我們將一一介紹。
XMLHttpRequest對象（簡稱XHR）在較早的時(shí)候用于從服務(wù)器異步檢索數(shù)據(jù)。
之所以使用XML，是因?yàn)樗紫扔糜跈z索XML數(shù)據(jù)。現(xiàn)在，它也可以用來檢索JSON, HTML或純文本。
function success() {
var data = JSON.parse(this.responseText)
console.log(data)
}
function error (err) {
console.log('Error Occurred:', err)
}
var xhr = new XMLHttpRequest()
xhr.onload = success
xhr.onerror = error
xhr.open("GET", ""https://jsonplaceholder.typicode.com/posts/1")
xhr.send()
我們看到，要發(fā)出一個(gè)簡單的GET請求，需要兩個(gè)偵聽器來處理請求的成功和失敗。我們還需要調(diào)用open()和send()方法。來自服務(wù)器的響應(yīng)存儲在responseText變量中，該變量使用JSON.parse()轉(zhuǎn)換為JavaScript 對象。
function success() {
var data = JSON.parse(this.responseText);
console.log(data);
}
function error(err) {
console.log('Error Occurred :', err);
}
var xhr = new XMLHttpRequest();
xhr.onload = success;
xhr.onerror = error;
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
xhr.send(JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
})
);
我們看到POST請求類似于GET請求。我們需要另外使用setRequestHeader設(shè)置請求標(biāo)頭“Content-Type” ，并使用send方法中的JSON.stringify將JSON正文作為字符串發(fā)送。
早期的開發(fā)人員，已經(jīng)使用了好多年的 XMLHttpRequest來請求數(shù)據(jù)了。現(xiàn)代的fetch API允許我們發(fā)出類似于XMLHttpRequest（XHR）的網(wǎng)絡(luò)請求。主要區(qū)別在于fetch()API使用Promises，它使 API更簡單，更簡潔，避免了回調(diào)地獄。
Fetch 是一個(gè)用于進(jìn)行AJAX調(diào)用的原生 JavaScript API，它得到了大多數(shù)瀏覽器的支持，現(xiàn)在得到了廣泛的應(yīng)用。
fetch(url, options)
.then(response => {
// handle response data
})
.catch(err => {
// handle errors
});
API參數(shù)
fetch() API有兩個(gè)參數(shù)
API返回Promise對象
fetch() API返回一個(gè)promise對象。
錯誤處理
請注意，對于成功的響應(yīng)，我們期望狀態(tài)代碼為200（正常狀態(tài)），但是即使響應(yīng)帶有錯誤狀態(tài)代碼（例如404（未找到資源）和500（內(nèi)部服務(wù)器錯誤）），fetch() API 的狀態(tài)也是 resolved，我們需要在.then() 塊中顯式地處理那些。
我們可以在response 對象中看到HTTP狀態(tài)：
const getTodoItem = fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.catch(err => console.error(err));
getTodoItem.then(response => console.log(response));
Response
{ userId: 1, id: 1, title: "delectus aut autem", completed: false }
在上面的代碼中需要注意兩件事:
錯誤處理
我們來看看當(dāng)HTTP GET請求拋出500錯誤時(shí)會發(fā)生什么：
fetch('http://httpstat.us/500') // this API throw 500 error
.then(response => () => {
console.log("Inside first then block");
return response.json();
})
.then(json => console.log("Inside second then block", json))
.catch(err => console.error("Inside catch block:", err));
Inside first then block
? ? Inside catch block: SyntaxError: Unexpected token I in JSON at position 4
我們看到，即使API拋出500錯誤，它仍然會首先進(jìn)入then()塊，在該塊中它無法解析錯誤JSON并拋出catch()塊捕獲的錯誤。
這意味著如果我們使用fetch()API，則需要像這樣顯式地處理此類錯誤：-
fetch('http://httpstat.us/500')
.then(handleErrors)
.then(response => response.json())
.then(response => console.log(response))
.catch(err => console.error("Inside catch block:", err));
function handleErrors(response) {
if (!response.ok) { // throw error based on custom conditions on response
throw Error(response.statusText);
}
return response;
}
? Inside catch block: Error: Internal Server Error at handleErrors (Script snippet %239:9)
fetch('https://jsonplaceholder.typicode.com/todos', {
method: 'POST',
body: JSON.stringify({
completed: true,
title: 'new todo item',
userId: 1
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => response.json())
.then(json => console.log(json))
.catch(err => console.log(err))
Response
? {completed: true, title: "new todo item", userId: 1, id: 201}
在上面的代碼中需要注意兩件事:-
Axios API非常類似于fetch API，只是做了一些改進(jìn)。我個(gè)人更喜歡使用Axios API而不是fetch() API，原因如下：
// 在chrome控制臺中引入腳本的方法
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://unpkg.com/axios/dist/axios.min.js';
document.head.appendChild(script);
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => console.log(response.data))
.catch(err => console.error(err));
Response
{ userId: 1, id: 1, title: "delectus aut autem", completed: false }
我們可以看到，我們直接使用response獲得響應(yīng)數(shù)據(jù)。數(shù)據(jù)沒有任何解析對象，不像fetch() API。
錯誤處理
axios.get('http://httpstat.us/500')
.then(response => console.log(response.data))
.catch(err => console.error("Inside catch block:", err));
Inside catch block: Error: Network Error
我們看到，500錯誤也被catch()塊捕獲，不像fetch() API，我們必須顯式處理它們。
axios.post('https://jsonplaceholder.typicode.com/todos', {
completed: true,
title: 'new todo item',
userId: 1
})
.then(response => console.log(response.data))
.catch(err => console.log(err))
{completed: true, title: "new todo item", userId: 1, id: 201}
我們看到POST方法非常簡短，可以直接傳遞請求主體參數(shù)，這與fetch（）API不同。
作者：Danny Markov 譯者：前端小智 來源：tutorialzine
原文：https://tutorialzine.com/2017/12-terminal-commands-every-web-developer-should-know
者 | 豬哥
責(zé)編 | maozz
JSON的誕生原因是因?yàn)閄ML整合到HTML中各個(gè)瀏覽器實(shí)現(xiàn)的細(xì)節(jié)不盡相同，所以道格拉斯·克羅克福特（Douglas Crockford） 和 奇普·莫寧斯達(dá)（Chip Morningstar）一起從JS的數(shù)據(jù)類型中提取了一個(gè)子集，作為新的數(shù)據(jù)交換格式，因?yàn)橹髁鞯臑g覽器使用了通用的JavaScript引擎組件，所以在解析這種新數(shù)據(jù)格式時(shí)就不存在兼容性問題，于是他們將這種數(shù)據(jù)格式命名為 “JavaScript Object Notation”，縮寫為 JSON，由此JSON便誕生了！
今天我們來學(xué)習(xí)一下JSON的結(jié)構(gòu)形式、數(shù)據(jù)類型、使用場景以及注意事項(xiàng)吧！
JSON格式
上面我們知道JSON是從JavaScript的數(shù)據(jù)類型中提取出來的子集，那JSON有幾種結(jié)構(gòu)形式呢？又有哪些數(shù)據(jù)類型呢？他們又分別對應(yīng)著JavaScript中的哪些數(shù)據(jù)類型呢？
JSON的2種結(jié)構(gòu)形式，鍵值對形式和數(shù)組形式。
舉了一個(gè)JSON的實(shí)例，就是鍵值對形式的，如下：
{
"person": {
"name": "pig",
"age": "18",
"sex": "man",
"hometown": {
"province": "江西省",
"city": "撫州市",
"county": "崇仁縣"
}
}
}
這種結(jié)構(gòu)的JSON數(shù)據(jù)規(guī)則是：一個(gè)無序的“‘名稱/值’對”集合。一個(gè)對象以 {左括號 開始， }右括號 結(jié)束。每個(gè)“名稱”后跟一個(gè) :冒號 ；“‘名稱/值’ 對”之間使用 ,逗號 分隔。
因?yàn)榇蠖鄶?shù)的時(shí)候大家用的JSON可能都是上面那種key-value形式，所以很多人在講解JSON的時(shí)候總是會忽略數(shù)組形式，這一點(diǎn)是需要注意的。
那JSON的數(shù)組形式是怎么樣的呢？舉一個(gè)實(shí)例吧！
["pig", 18, "man", "江西省撫州市崇仁縣"]
數(shù)組形式的JSON數(shù)據(jù)就是值（value）的有序集合。一個(gè)數(shù)組以 [左中括號 開始， ]右中括號 結(jié)束。值之間使用 ,逗號 分隔。
JOSN的6種數(shù)據(jù)類型
上面兩種JSON形式內(nèi)部都是包含value的，那JSON的value到底有哪些類型，而且上期我們說JSON其實(shí)就是從Js數(shù)據(jù)格式中提取了一個(gè)子集，那具體有哪幾種數(shù)據(jù)類型呢？
string：字符串，必須要用雙引號引起來。
number：數(shù)值，與JavaScript的number一致，整數(shù)（不使用小數(shù)點(diǎn)或指數(shù)計(jì)數(shù)法）最多為 15 位，小數(shù)的最大位數(shù)是 17。
object：JavaScript的對象形式，{ key:value }表示方式，可嵌套。
array：數(shù)組，JavaScript的Array表示方式[ value ]，可嵌套。
true/false：布爾類型，JavaScript的boolean類型。
：空值，JavaScript的。
以上數(shù)據(jù)形式圖片來源JSON官方文檔：http://www.json.org/json-zh.html
JSON使用場景
介紹完JSON的數(shù)據(jù)格式，那我們來看看JSON在企業(yè)中使用的比較多的場景。
接口返回?cái)?shù)據(jù)和序列化。JSON用的最多的地方莫過于Web了，現(xiàn)在的數(shù)據(jù)接口基本上都是返回的JSON，具體細(xì)化的場景有：
Ajxa異步訪問數(shù)據(jù)
RPC遠(yuǎn)程調(diào)用
前后端分離后端返回的數(shù)據(jù)
開放API，如百度、高德等一些開放接口
企業(yè)間合作接口
這種API接口一般都會提供一個(gè)接口文檔，說明接口的入?yún)ⅰ⒊鰠⒌龋?/p>
一般的接口返回?cái)?shù)據(jù)都會封裝成JSON格式，比如類似下面這種
{
"code": 1,
"msg": "success",
"data": {
"name": "pig",
"age": "18",
"sex": "man",
"hometown": {
"province": "江西省",
"city": "撫州市",
"county": "崇仁縣"
}
}
}
程序在運(yùn)行時(shí)所有的變量都是保存在內(nèi)存當(dāng)中的，如果出現(xiàn)程序重啟或者機(jī)器宕機(jī)的情況，那這些數(shù)據(jù)就丟失了。一般情況運(yùn)行時(shí)變量并不是那么重要丟了就丟了，但有些內(nèi)存中的數(shù)據(jù)是需要保存起來供下次程序或者其他程序使用。
保存內(nèi)存中的數(shù)據(jù)要么保存在數(shù)據(jù)庫，要么保存直接到文件中，而將內(nèi)存中的數(shù)據(jù)變成可保存或可傳輸?shù)臄?shù)據(jù)的過程叫做序列化，在Python中叫pickling，在其他語言中也被稱之為serialization，marshalling，flattening等等，都是一個(gè)意思。
正常的序列化是將編程語言中的對象直接轉(zhuǎn)成可保存或可傳輸?shù)模@樣會保存對象的類型信息，而JSON序列化則不會保留對象類型！
為了讓大家更直觀的感受區(qū)別，豬哥用代碼做一個(gè)測試，大家一目了然
Python對象直接序列化會保存class信息，下次使用loads加載到內(nèi)存時(shí)直接變成Python對象。
JSON對象序列化只保存屬性數(shù)據(jù)，不保留class信息，下次使用loads加載到內(nèi)存可以直接轉(zhuǎn)成dict對象，當(dāng)然也可以轉(zhuǎn)為Person對象，但是需要寫輔助方法。
對于JSON序列化不能保存class信息的特點(diǎn)，那JSON序列化還有什么用？答案是當(dāng)然有用，對于不同編程語言序列化讀取有用，比如：我用Python爬取數(shù)據(jù)然后轉(zhuǎn)成對象，現(xiàn)在我需要將它序列化磁盤，然后使用Java語言讀取這份數(shù)據(jù)，這個(gè)時(shí)候由于跨語言數(shù)據(jù)類型不同，所以就需要用到JSON序列化。
存在即合理，兩種序列化可根據(jù)需求自行選擇！
最后就是生成Token和配置文件
首先聲明Token的形式多種多樣，有JSON、字符串、數(shù)字等等，只要能滿足需求即可，沒有規(guī)定用哪種形式。
JSON格式的Token最有代表性的莫過于JWT（JSON Web Tokens）。
隨著技術(shù)的發(fā)展，分布式web應(yīng)用的普及，通過Session管理用戶登錄狀態(tài)成本越來越高，因此慢慢發(fā)展成為Token的方式做登錄身份校驗(yàn)，然后通過Token去取Redis中的緩存的用戶信息，隨著之后JWT的出現(xiàn)，校驗(yàn)方式更加簡單便捷化，無需通過Redis緩存，而是直接根據(jù)Token取出保存的用戶信息，以及對Token可用性校驗(yàn)，單點(diǎn)登錄更為簡單。
使用JWT做過app的登錄系統(tǒng)，大概的流程就是：
用戶輸入用戶名密碼
app請求登錄中心驗(yàn)證用戶名密碼
如果驗(yàn)證通過則生成一個(gè)Token，其中Token中包含：
用戶的uid、Token過期時(shí)間、過期延期時(shí)間等，然后返回給app
app獲得Token，保存在cookie中，下次請求其他服務(wù)則帶上
其他服務(wù)獲取到Token之后調(diào)用登錄中心接口驗(yàn)證
驗(yàn)證通過則響應(yīng)
JWT登錄認(rèn)證有哪些優(yōu)勢：
性能好：服務(wù)器不需要保存大量的session
單點(diǎn)登錄（登錄一個(gè)應(yīng)用，同一個(gè)企業(yè)的其他應(yīng)用都可以訪問）：使用JWT做一個(gè)登錄中心基本搞定，很容易實(shí)現(xiàn)。
兼容性好：支持移動設(shè)備，支持跨程序調(diào)用，Cookie 是不允許垮域訪問的，而 Token 則不存在這個(gè)問題。
安全性好：因?yàn)橛泻灻訨WT可以防止被篡改。更多JWT相關(guān)知識自行在網(wǎng)上學(xué)習(xí)，本文不過多介紹！
說實(shí)話JSON作為配置文件使用場景并不多，最具代表性的就是npm的package.json包管理配置文件了，下面就是一個(gè)npm的package.json配置文件內(nèi)容。
{
"name": "server", //項(xiàng)目名稱
"version": "0.0.0",
"private": true,
"main": "server.js", //項(xiàng)目入口地址，即執(zhí)行npm后會執(zhí)行的項(xiàng)目
"scripts": {
"start": "node ./bin/www" ///scripts指定了運(yùn)行腳本命令的npm命令行縮寫
},
"dependencies": {
"cookie-parser": "~1.4.3", //指定項(xiàng)目開發(fā)所需的模塊
"debug": "~2.6.9",
"express": "~4.16.0",
"http-errors": "~1.6.2",
"jade": "~1.11.0",
"morgan": "~1.9.0"
}
}
但其實(shí)JSON并不合適做配置文件，因?yàn)樗荒軐懽⑨尅⒆鳛榕渲梦募目勺x性差等原因。
配置文件的格式有很多種如：toml、yaml、xml、ini等，目前很多地方開始使用yaml作為配置文件格式。
JSON在Python中的使用
最后我們來看看Python中操作JSON的常用方法有哪些，在Python中操作JSON時(shí)需要引入json標(biāo)準(zhǔn)庫。
import json
類型轉(zhuǎn)換
Python類型轉(zhuǎn)JSON：json.dump
# 1、Python的dict類型轉(zhuǎn)JSON
person_dict = {'name': 'pig', 'age': 18, 'sex': 'man', 'hometown': '江西撫州'}
# indent參數(shù)為縮進(jìn)空格數(shù)
person_dict_json = json.dumps(person_dict, indent=4)
print(person_dict_json, '\n')
# 2、Python的列表類型轉(zhuǎn)JSON
person_list = ['pig', 18, 'man', '江西撫州']
person_list_json = json.dumps(person_list)
print(person_list_json, '\n')
# 3、Python的對象類型轉(zhuǎn)JSON
person_obj = Person('pig', 18, 'man', '江西撫州')
# 中間的匿名函數(shù)是獲得對象所有屬性的字典形式
person_obj_json = json.dumps(person_obj, default=lambda obj: obj.__dict__, indent=4)
print(person_obj_json, '\n')
執(zhí)行結(jié)果：
JSON轉(zhuǎn)Python類型：json.loads
# 4、JSON轉(zhuǎn)Python的dict類型
person_json = '{ "name": "pig","age": 18, "sex": "man", "hometown": "江西撫州"}'
person_json_dict = json.loads(person_json)
print(type(person_json_dict), '\n')
# 5、JSON轉(zhuǎn)Python的列表類型
person_json2 = '["pig", 18, "man", "江西撫州"]'
person_json_list = json.loads(person_json2)
print(type(person_json_list), '\n')
# 6、JSON轉(zhuǎn)Python的自定義對象類型
person_json = '{ "name": "pig","age": 18, "sex": "man", "hometown": "江西撫州"}'
# object_hook參數(shù)是將dict對象轉(zhuǎn)成自定義對象
person_json_obj = json.loads(person_json, object_hook=lambda d: Person(d['name'], d['age'], d['sex'], d['hometown']))
print(type(person_json_obj), '\n')
執(zhí)行結(jié)果如下：
對應(yīng)的數(shù)據(jù)類型
上面我們演示了Python類型與JSON的相互轉(zhuǎn)換，最開始的時(shí)候我們講過JSON有6種數(shù)據(jù)類型，那這6種數(shù)據(jù)類型分別對應(yīng)Python中的哪些數(shù)據(jù)類型呢？
需要注意的點(diǎn)
JSON的鍵名和字符串都必須使用雙引號引起來，而Python中單引號也可以表示為字符串，所以這是個(gè)比較容易犯的錯誤！
Python類型與JSON相互轉(zhuǎn)換的時(shí)候到底是用load/dump還是用loads\dumps？
他們之間有什么區(qū)別？
什么時(shí)候該加s什么時(shí)候不該加s？
這個(gè)我們可以通過查看源碼找到答案：
不加s的方法入?yún)⒍嗔艘粋€(gè)fp表示filepath，最后多了一個(gè)寫入文件的操作。
所以我們在記憶的時(shí)候可以這樣記憶：
加s表示轉(zhuǎn)成字符串(str)，不加s表示轉(zhuǎn)成文件。
Python自定義對象與JSON相互轉(zhuǎn)換的時(shí)候需要輔助方法來指明屬性與鍵名的對應(yīng)關(guān)系，如果不指定一個(gè)方法則會拋出異常！
相信有些看的仔細(xì)的同學(xué)會好奇上面使用json.dumps方法將Python類型轉(zhuǎn)JSON的時(shí)候，如果出現(xiàn)中文，則會出現(xiàn)：
\u6c5f\u897f\u629a\u5dde
這種東西，這是為什么呢？
原因是：Python 3中的json在做dumps操作時(shí)，會將中文轉(zhuǎn)換成unicode編碼，并以16進(jìn)制方式存儲，而并不是UTF-8格式！
總結(jié)
今天我們學(xué)習(xí)了JSON的2種形式，切記JSON還有[...]這種形式的。
學(xué)習(xí)了JSON的6種數(shù)據(jù)類型他們分別對于Python中的哪些類型。
了解了JSON的一些使用場景以及實(shí)際的例子。
還學(xué)習(xí)了在Python中如何使用JSON以及需要注意的事項(xiàng)。
一個(gè)JSON知識點(diǎn)卻分兩篇長文（近萬字）來講，其重要性不言而喻。因?yàn)椴还苣闶亲雠老x、還是做數(shù)據(jù)分析、web、甚至前端、測試、運(yùn)維，JSON都是你必須要掌握的一個(gè)知識點(diǎn)
本文為作者投稿，版權(quán)歸作者個(gè)人所有。
步一步的教程，向您介紹使用 PyScript 的 HTTP 請求
在 PyScript 中發(fā)出請求是一個(gè)熱門話題，因?yàn)?python 的流行模塊請求它在 Pyodide 中不受支持。 幸運(yùn)的是，還有其他方法可以在 PyScript 中發(fā)出 HTTP 請求。
方法 #1 — 使用 Pyodide 的 pyfetch（最佳方法）
由于 PyScript 建立在 pyodide 之上，因此您可以使用任何來自 pyodide 的 API。
但是..什么是真正的pyfetch？
根據(jù) pyodide 的文檔，pyfetch 是 JavaScript fetch 的包裝器。
Pyodide 提供了 pyodide.http.pyfetch ，它是一個(gè)方便的 JavaScript fetch 包裝器。
與 python 不支持的模塊請求相比，fetch 的一個(gè)好處是 fetch 是異步的。
主要問題是請求是同步的，而 fetch 是異步的。 可以使用 XMLHttpRequest 進(jìn)行同步調(diào)用，但是它不能支持很多選項(xiàng)并且效率不高。
我們來看看pyodide.http.pyfetch的定義
async http.pyfetch(url: str, **kwargs) → pyodide.http.FetchResponse 文檔指出 **kwargs 可以是用于 Javascript 的 Fetch API 的任何可選參數(shù)。
這些參數(shù)中包括正文、標(biāo)題、方法
from pyodide.http import pyfetch
import asyncioresponse = await pyfetch(url="https://jsonplaceholder.typicode.com/todos/1", method="GET")output = f"GET request=> status:{response.status}, json:{await response.json()}"這里最重要的是你必須導(dǎo)入 asyncio 包，否則你會得到奇怪的錯誤。 這個(gè)無證的細(xì)節(jié)困擾了我好幾個(gè)小時(shí)。 幸運(yùn)的是，我找到了一篇對我有幫助的好文章。 希望當(dāng)您閱讀本文時(shí)，這已經(jīng)解決了。
使用 pyfetch 的 HTTP GET 請求的完整示例：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<style>
h1 {
font-size: 20px;
color: green;
text-transform: uppercase;
text-align: center;
margin: 0 0 35px 0;
text-shadow: 0px 1px 0px #f2f2f2;
}
</style>
</head>
<body style='font-size: 20px;'>
<h1>PyScript - HTTP Requests pyfetch</h1>
<div id="request_output"></div>
<py-script>
from pyodide.http import pyfetch
import asyncio
response = await pyfetch(url="https://jsonplaceholder.typicode.com/todos/1", method="GET")
output = f"GET request=> status:{response.status}, json:{await response.json()}"
pyscript.write('request_output', output)
</py-script>
</body>
</html>方法 #2 — XMLHttpRequest 和其他 JS 函數(shù)
在 PyScript 中發(fā)出 HTTP 請求的第二種方法是使用其他 JavaScript 函數(shù)。 您可以使用 JS 模塊在 PyScript 中調(diào)用任何 javascript 函數(shù)/對象。
from js import XMLHttpRequest
req = XMLHttpRequest.new()
req.open("GET", "https://jsonplaceholder.typicode.com/todos/1", False)
req.send(None)
output = str(req.response)請記住，如果您以這種方式使用 XMLHttpRequest，您需要發(fā)出一個(gè)具有一些實(shí)際原始輸出/json 的 Web 請求。 如果不是，它會彈出一個(gè) CORS 錯誤，如果你愿意，你可以在瀏覽器中禁用它。
使用 XMLHttpRequest 的 HTTP GET 請求的完整示例：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<style>
h1 {
font-size: 20px;
color: green;
text-transform: uppercase;
text-align: center;
margin: 0 0 35px 0;
text-shadow: 0px 1px 0px #f2f2f2;
}
</style>
</head>
<body style='font-size: 20px;'>
<h1>PyScript - HTTP Requests XMLHttpRequest</h1>
<div id="request_output"></div>
<py-script>
from js import XMLHttpRequest
req = XMLHttpRequest.new()
req.open("GET", "https://jsonplaceholder.typicode.com/todos/1", False)
req.send(None)
output = str(req.response)
pyscript.write('request_output', output)
</py-script>
</body>
</html>結(jié)論
總之，PyScript PyScript 中的請求并不難掌握。 它們只是現(xiàn)有 JavaScript 函數(shù)的包裝器。
感謝您閱讀本文。
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
