Cách sử dụng Python và JavaScript để giao tiếp bằng JSON
Bạn có tự hỏi làm thế nào bạn có thể gửi dữ liệu từ JavaScript sang Python? Chà, điều đó thật dễ dàng với giao diện lập trình ứng dụng (API).
Ngôn ngữ lập trình giao tiếp và trao đổi dữ liệu bằng cách sử dụng API. Thông thường, trong giao tiếp như vậy, công nghệ phụ trợ (nhà cung cấp API) phản hồi bằng dữ liệu sau khi nhận được yêu cầu từ tập lệnh giao diện người dùng. Tuy nhiên, có nhiều loại yêu cầu; trong bài viết này, bạn sẽ học cách sử dụng yêu cầu POST để gửi dữ liệu định dạng JSON từ JavaScript đến máy chủ bằng API Python.
Mục Lục
Cài đặt máy chủ Python và Flask
Nếu bạn đang sử dụng Windows và chưa cài đặt Python, hãy tải xuống từ trang web python.org. Người dùng Mac không cần tải xuống Python vì hệ điều hành đi kèm với nó theo mặc định. Bạn cũng sẽ có thể làm theo một cách hợp lý bằng cách sử dụng Linux.
Thiết lập và cài đặt máy chủ
Bạn sẽ cần một máy chủ để tạo API REST Python. Có rất nhiều khung công tác web Python cho việc này. Flask, Django, FastAPI, Tornado và nhiều ứng dụng khác rất hữu ích cho việc viết các API REST bằng Python.
Tuy nhiên, bạn sẽ sử dụng Flask cho hướng dẫn này, vì nó dễ hiểu và thân thiện với API.
Đầu tiên, tạo một môi trường ảo Python. Mở thiết bị đầu cuối của bạn vào thư mục gốc dự án của bạn. Sau đó, cài đặt Bình giữ nhiệt và bình cors sử dụng pip:
pip install Flask, flask-cors
Các bình cors gói là mô-đun CORS tích hợp của Flask để bỏ qua chính sách tài nguyên nguồn gốc chéo trong khi yêu cầu từ điểm cuối API. Bạn sẽ thấy cách thiết lập điều này với Flask khi bạn tiếp tục.
Đó là tất cả cho phần cài đặt.
Cấu trúc bộ xương bình
Tiếp theo, tạo một tệp mới trong thư mục gốc dự án của bạn. Đảm bảo rằng nó có .py phần mở rộng tệp. Ví dụ, nó có thể được app.py.
Mở tệp đó vào trình chỉnh sửa mã yêu thích của bạn và thiết lập ứng dụng Flask của bạn như sau:
from flask import Flask, request, jsonify
from flask_cors import CORS
#Set up Flask:
app = Flask(__name__)
#Set up Flask to bypass CORS at the front end:
cors = CORS(app)
#Run the app:
if __name__ == "__main__":
app.run()
Đoạn mã trên nhập các mô-đun bắt buộc và định cấu hình ứng dụng của bạn. Mã phụ ở cuối đuôi (app.run ()) đặt ứng dụng chạy trên một cổng mặc định, thường là cổng 5000.
Tạo một điểm cuối API POST
Trong hướng dẫn này, bạn sẽ gửi dữ liệu JSON chứa các nhãn hiệu xe hơi khác nhau và các kiểu xe của chúng từ JavaScript tới máy chủ bằng cách sử dụng điểm cuối Flask. Trong JavaScript của mình, bạn sẽ chỉ định dữ liệu cho một biến có tên là ô tô. Tuy nhiên, bạn có thể đặt cho nó bất kỳ tên nào bạn thích.
Nhưng trước tiên, hãy mở app.py tệp, thiết lập điểm cuối POST API và gọi nó người nhận. Hãy nhớ rằng bạn có thể sử dụng bất kỳ quy ước đặt tên nào bạn thích.
Đây là giao diện tệp Python của bạn bây giờ:
from flask import Flask, request, jsonify
from flask_cors import CORS
#Set up Flask:
app = Flask(__name__)
#Set up Flask to bypass CORS:
cors = CORS(app)
#Create the receiver API POST endpoint:
@app.route("/receiver", methods=["POST"])
def postME():
data = request.get_json()
data = jsonify(data)
return data
if __name__ == "__main__":
app.run(debug=True)
Đăng dữ liệu từ JavaScript lên Python Flask API
Vì điểm cuối API POST đã sẵn sàng, hãy tạo tệp JavaScript và HTML trong thư mục gốc của dự án (nơi chứa ứng dụng flask của bạn). Đặt cho họ bất kỳ tên nào bạn thích (data.js và index.html trong trường hợp này).
Nhưng trước tiên, đây là cách index.html nhìn:
<!DOCTYPE html>
<html>
<head>
<title>
Python sending
</title>
</head>
<body>
<button id="theButton">Post to Python</button>
<h3 id = "info"></h3>
<!-- Link to the JavaScript file here: -->
<script src="data.js"></script>
</body>
</html>Đáng chú ý, tệp HTML ở trên mô tả một nút lắng nghe sự kiện nhấp chuột để hiển thị dữ liệu đã đăng, trong bảng điều khiển hoặc DOM.
Các h3 thẻ đóng vai trò như một vùng chứa cho dữ liệu đến nếu sau này bạn quyết định hiển thị nó trong DOM. Lưu ý rằng đây không phải là quy ước — bạn có thể hiển thị dữ liệu đến trong bất kỳ vùng chứa HTML nào bạn thích.
Sau khi thiết lập tệp HTML, hãy sử dụng API tìm nạp tích hợp JavaScripts để đăng dữ liệu (ô tô) đến máy chủ.
Đây là JavaScript:
// Get the button and container elements from HTML:
const button = document.getElementById("theButton")
const data = document.getElementById("info")
// Create an array of cars to send to the server:
const cars = [
{ "make":"Porsche", "model":"911S" },
{ "make":"Mercedes-Benz", "model":"220SE" },
{ "make":"Jaguar","model": "Mark VII" }
];
// Create an event listener on the button element:
button.onclick= function(){
// Get the reciever endpoint from Python using fetch:
fetch("http://127.0.0.1:5000/receiver",
{
method: 'POST',
headers: {
'Content-type': 'application/json',
'Accept': 'application/json'
},
// Strigify the payload into JSON:
body:JSON.stringify(cars)}).then(res=>{
if(res.ok){
return res.json()
}else{
alert("something is wrong")
}
}).then(jsonResponse=>{// Log the response data in the console
console.log(jsonResponse)
}
).catch((err) => console.error(err));
}
Tập lệnh trên chứa một mảng JSON của xe đua. Các button.click là một trình xử lý sự kiện nhấp chuột được đính kèm vào nút trong tệp HTML mà bạn đã tạo trước đó.
Do đó, khi người dùng nhấp vào nút, tìm về sử dụng BÀI ĐĂNG yêu cầu gửi mảng ô tô đến máy chủ. Các người nhận endpoint trong Flask nhận yêu cầu này và gửi dữ liệu phản hồi tới JavaScript (giao diện người dùng), hiển thị trong bảng điều khiển của trình duyệt.
Bây giờ, khởi chạy tệp HTML trong trình duyệt của bạn và mở bảng điều khiển dành cho nhà phát triển (trên Windows: Điều khiển + Sự thay đổi + tôitrên Mac: CMD + ALT + tôi). Đi tới Bảng điều khiển tiết diện, và bạn sẽ thấy phản hồi JSON được trả lại.
Để theo dõi phản hồi JSON trong thời gian thực, hãy nhấp vào Mạng trong bảng điều khiển dành cho nhà phát triển (trên Chrome). Bên dưới dòng thời gian mạng, hãy chọn người nhận hoặc tên của điểm cuối Flask của bạn. Sau đó nhấn vào Phản ứng ở đầu menu con đó.
Câu trả lời sẽ trông giống như sau:
Ngoài ra, bạn có thể nhấp vào Tiêu đề để xem trạng thái phản hồi của yêu cầu. Đây phải là 200, có nghĩa là API của bạn đã trả lại phản hồi hợp lệ.
Tiếp theo, bây giờ bạn có thể ghi dữ liệu vào DOM với logic bổ sung trong JavaScript của bạn:
// Get the button and container from HTML:
const button = document.getElementById("theButton")
const data = document.getElementById("info")
// Create an event listener on the button element:
button.onclick= function(){// Get the receiver endpoint from Python using fetch:
fetch("http://127.0.0.1:5000/receiver",
{
method: 'POST',
headers: {
'Content-type': 'application/json',
'Accept': 'application/json'
},
// Strigify the payload into JSON:
body:JSON.stringify(cars)}).then(res=>{
if(res.ok){
return res.json()
}else{
alert("something is wrong")
}
}).then(jsonResponse=>{
// Iterate through the data with Map and write your rendering logic:
jsonResponse.map(Main=>
Main.make==="Porsche"? data.innerHTML +="<p>"+ Main.make+" "+" is a good product":
data.innerHTML +="<p>"+ Main.make+" "+"is an average product" )
}
).catch((err) => console.error(err)); }
Sử dụng bản đồ , tập lệnh trên lặp lại qua dữ liệu phản hồi. Các Main.make thuộc tính lấy tên của từng chiếc xe từ dữ liệu phản hồi trả về từ máy chủ. Logic bậc ba trong bản đồ sau đó hàm hướng dẫn JavaScript về những gì sẽ hiển thị với mỗi lần tạo.
Do đó, khi bạn nhấp vào nút đăng, đây là những gì bạn nhận được:
Của bạn đây! Bây giờ bạn đã biết cách thiết lập điểm cuối Flask và đăng dữ liệu lên máy chủ một cách không đồng bộ bằng JavaScript.
Tiếp tục khám phá các API REST trong phát triển web
Các API cung cấp cách tốt nhất để tách phần phụ trợ của bạn khỏi phần trước. Một trong những lợi thế của nó là nó cho phép bạn tách phía máy khách khỏi phía máy chủ một cách dễ dàng. Bạn đã thấy cách kết nối JavaScript với Python và gửi dữ liệu đến máy chủ, nhưng đó mới chỉ là bề nổi.
Bạn có thể tìm hiểu sâu hơn bằng cách kết nối API Flask REST với cơ sở dữ liệu như MongoDB — vì vậy, điều này cho phép bạn có một kho lưu trữ dữ liệu đã đăng. Bạn thậm chí có thể biến điều này thành một dự án toàn diện bằng cách gửi dữ liệu đến cơ sở dữ liệu bằng cách sử dụng trường biểu mẫu.
Đọc tiếp
Giới thiệu về tác giả
