如何讓python和javascript使用json進行通訊

今天我將向您展示如何使用JSON將資料從JavaScript傳送到Python。我將介紹如何設定一個web伺服器，以及您需要的所有程式碼。...

有沒有想過如何在兩種編程語言之間發送數據？是否嘗試發送一個對象或多個數據段？

今天我將向您展示如何使用JSON將數據從JavaScript發送到Python。我將介紹如何設置一個web服務器，以及您需要的所有代碼。

先決條件

你需要一些東西來開始這個項目。我將在已經安裝了Python的Mac上運行。您應該能夠很好地使用Linux。如果您使用的是Windows，那麼您需要下載並安裝Python，也許還需要學習一下您的命令行技能。

您將需要pip，一個Python包管理器。默認情況下，在Python版本大於2.7.9的情況下安裝。

服務器設置

您需要一個服務器來為網頁提供Python服務。有很多選擇。如果已經有服務器設置，可以跳過此步驟。

這裡有很多選擇。Tornado是一個不錯的選擇，就像Twisted一樣（我以前為DIY網絡攝像機寫過Twisted）。我將在這個項目中使用燒瓶。

使用pip（通過命令行）安裝燒瓶：

pip install Flask

就這樣！安裝有幾個選項，但只要安裝正確，就可以了。

您可能希望考慮使用Python虛擬環境，但是這完全是可選的。

python設置

在您喜愛的文本編輯器或集成開發環境（IDE）中創建新文件。我用的是Sublime Text 3和PyCharm，但是用你喜歡的任何東西。

現在執行燒瓶的一些初始設置：

from flask import Flaskapp = Flask(__name__)

這將導入所需的模塊並配置應用程序。現在設置路徑：

@app.route("/output")def output():return "Hello World!"

這將配置一個路徑，它類似於網站的頁面。這有時可以稱為端點或路由。

def output（）行定義了一個名為output的函數或方法，該函數或方法將在調用此端點時運行。這些方法不必使用與端點相同的名稱——可以使用任何合適的名稱。這個方法裡面是一個簡單的你好，世界！字符串。最後，將腳本設置為在請求時實際運行：

if __name__ == "__main__":app.run()

繼續並將此腳本另存為json_輸入輸出在合適的位置。返回終端並導航到項目文件夾。運行腳本：

python json_io.py

python這個詞用來告訴計算機下面的文件應該作為python腳本運行。後面的文件名是希望作為Python運行的文件的名稱。如果一切正常，您應該在終端中看到一條狀態消息：

* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

這將顯示服務器運行的IP地址以及端口。這將是127.0.0.1和5000。您可以按CTRL&gt；C停止此運行，但暫時不要這樣做。

在你的瀏覽器中輸入地址，你會看到你好，世界！出現在屏幕上。現在您已經成功地安裝了Python服務器並編寫了第一個腳本！如果進行任何更改，則需要重新啟動服務器（停止腳本，然後再次運行它）。

如果要在同一網絡上的其他計算機上查看腳本，請更改應用程序運行（）至：

app.run("0.0.0.0", "5010")

這條線有兩部分。第一個命令告訴Flask在您的本地IP地址上提供文件（確保您將其保持為0.0.0.0，即使這不是您的IP地址）。第二部分指定端口。如果您願意，可以更改端口。再次運行腳本（記住保存並重新啟動）。

現在，您應該能夠從同一網絡上的其他計算機訪問腳本。確保使用您的IP地址（在命令行中運行ifconfig）和之前輸入的端口。如果您正在使用防火牆，則可能需要配置防火牆。

控制檯將向您顯示HTTP響應和連接到服務器的任何設備的IP地址：

注意endpoint/df是如何返回404錯誤的嗎？端點未設置！如果您希望通過internet訪問，請查看端口轉發。

模板

現在您的服務器已經全部安裝完畢，是時候編寫一些模板了。您將使用JSON在Python和Javascript之間發送數據，而模板則促進了這一點。我們已經寫過JSON在過去是什麼，所以如果你不確定的話就去讀一下。

您需要使用模板語言。Jinja2帶有燒瓶，因此不需要額外的設置。

模板語言與web服務器配合使用。它接受Python腳本（後端代碼）的輸出，並使用HTML（前端代碼）方便地輸出給用戶。需要注意的是，模板不應該用於邏輯！保持Python中的邏輯，並且只使用模板來顯示數據。如果你開始嘗試複雜化模板，它會變得非常混亂。

在項目目錄中創建一個名為templates的文件夾。Flask將此文件夾中的文件識別為模板文件。不要在這裡放置任何Python腳本，這裡可以放置HTML文件。

創建一個名為索引.html. 在其中，放置以下代碼：

這是訪問一段名為name的數據的方法，可以在腳本中找到它。回到你的json_輸入輸出. 腳本，並修改輸出函數。輸入以下代碼，而不是返回hello world：

return render_template("index.html", name="Joe")

這將加載索引.html文件，並用{name}}模板標記替換字符串Joe。可以使用此方法加載模板文件夾中的任何頁面，並向其傳遞任意數量的數據。

代碼

既然您知道了模板的工作原理，下面是您需要的完整HTML代碼。把這個貼在你的口袋裡索引.html文件：

請注意，這不包括CSS或任何HTML標題。這些是網頁所必需的（這個例子沒有它們也能用），所以如果你願意的話，可以在W3Schools上查看這些。

這個文件裡沒有太多內容。已設置拉力賽車的JSON列表。有一段文字和一個按鈕。當按下按鈕時，jQuery用於將汽車列表發佈到服務器。這將轉到下一個要創建的接收方端點。如果您想進一步瞭解jQuery在這種情況下的工作原理，請務必閱讀我們的jQuery指南。

以下是json所需的代碼_輸入輸出:

#!flask/bin/pythonimport sysfrom flask import Flask, render_template, request, redirect, Resp***eimport random, jsonapp = Flask(__name__)@app.route('/')def output():# serve index templatereturn render_template('index.html', name='Joe')@app.route('/receiver', methods = ['POST'])def worker():# read json + replydata = request.get_json()result = ''for item in data:# loop over every rowresult += str(item['make']) + ''return resultif __name__ == '__main__':# run!app.run()

這段代碼定義了兩個端點。默認的（/）服務於上一個html頁面。當按下按鈕時，向/receiver端點發出POST請求。路由定義的第二部分（methods=['POST']）定義瞭如何訪問此頁。由於POST是唯一指定的方式，因此此路由將拒絕任何其他http請求（如GET）。

這個/receiver端點只是在每個JSON行上循環，並將car make附加到一個字符串，然後在循環之後返回。JSON存儲在數據變量中，並作為request.get\u json（），Python知道這是一個JSON對象。for循環中的item變量可以看作是一行數據。每行的不同元素可以通過使用方括號中的名稱（item['make']）來訪問。

打開瀏覽器開發人員工具（Mac OS/Chrome上的CMD&gt；ALT&gt；I），然後導航到“網絡”選項卡。按下按鈕，您將看到出現服務器響應：

嘗試修改初始JSON，看看會發生什麼。讓我們修改Python來做一些不同的事情，具體取決於JSON。下面是for循環所需的新代碼：

for item in data:# loop over every rowmake = str(item['make'])if(make == 'Porsche'):result += make + ' -- That is a good manufacturer'else:result += make + ' -- That is only an average manufacturer'

它使用一個簡單的if語句來更改輸出，具體取決於輸入。您可以很容易地將其修改為寫入數據庫，或運行不同的代碼段。下面是它現在的樣子：