Bạn đang tự hỏi làm thế nào bạn có thể gửi dữ liệu từ JavaScript đến Python? Chà, điều đó 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 API. Thông thường, trong giao tiếp như vậy, một công nghệ phụ trợ [nhà cung cấp API] trả lời với dữ liệu sau khi nhận được yêu cầu từ tập lệnh phía trước. Có nhiều loại yêu cầu, mặc dù; Trong bài viết này, bạn sẽ tìm hiểu 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.
Cài đặt máy chủ Python và Flask
Nếu bạn đang ở trên 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ĐH đi kèm với nó theo mặc định. Bạn cũng có thể theo dõi 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ó nhiều khung web Python cho việc này. Bình, Django, Fastapi, Tornado, và nhiều người khác có ích để viết API REST bằng Python.
Tuy nhiên, bạn sẽ sử dụng bình 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 và cánh bình bằng PIP:Flask and flask-cors using pip:
pip install Flask, flask-cors
Gói Flask-Cors là mô-đun CORS tích hợp của Flask để bỏ qua chính sách tài nguyên có 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 nó với bình khi bạn tiếp tục.flask-cors package is Flask's built-in CORS module for bypassing the cross-origin resource policy while requesting from the API endpoint. You'll see how to set this up with Flask as you move on.
Đó là tất cả cho phần cài đặt.
Cấu trúc xương bình
Tiếp theo, tạo một tệp mới trong thư mục root dự án của bạn. Đảm bảo rằng nó có phần mở rộng tệp .py. Ví dụ: nó có thể là app.py..py file extension. For example, it can be 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 bình của bạn như sau:
from flask import Flask, request, jsonify
from flask_cors import CORS
#Set up Flaskstrong>:
app = Flask[__name__]
#Set up Flask to bypass CORS at the front end:
cors = CORS[app]
#Run the app:
if __name__ == "__main__":
app.run[]Mã trên nhập các mô -đun cần thiết và định cấu hình ứng dụng của bạn. Mã bổ sung ở đầu đuôi [app.run []] đặt ứng dụng để chạy trên cổng mặc định, thường là cổng 5000.app.run[]] sets the app to run on a default port, usually port 5000.
Tạo điểm cuối API bài đăng
Trong hướng dẫn này, bạn sẽ gửi dữ liệu JSON chứa các thương hiệu xe hơi khác nhau và các mô hình của họ từ JavaScript đến máy chủ bằng điểm cuối của Flask. Trong JavaScript của bạn, bạn sẽ gán dữ liệu cho một biến có tên là Cars. Bạn có thể cho nó bất kỳ tên bạn thích, mặc dù.cars. You can give it any name you like, though.
Nhưng trước tiên, hãy mở tệp app.py, thiết lập điểm cuối API POST và gọi nó là 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.app.py file, set up a POST API endpoint, and call it receiver. Have it in mind that you can use any naming convention you like.
Đây là cách mà tệp Python của bạn trông bây giờ:
from flask import Flask, request, jsonify
from flask_cors import CORS
#Set up Flaskstrong>:
app = Flask[__name__]
#Set up Flask to bypass CORSstrong>:
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 API Python Flask
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 dự án của bạn [nơi ứng dụng bình 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].data.js and index.html in this case].
Nhưng trước tiên, đây là cách mà index.html trông:index.html looks:
Python sending
Post to Python
strong>
Đá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 được đăng, trong bảng điều khiển hoặc DOM.
Thẻ H3 đóng vai trò là một thùng chứa cho dữ liệu đến nếu sau đó bạn quyết định hiển thị nó trong DOM. Lưu ý rằng đây không phải là một quy ước mà bạn có thể hiển thị dữ liệu đến trong bất kỳ thùng chứa HTML nào bạn thích.h3 tag serves as a container for the incoming data if you later decide to display it in the DOM. Note that this is not a convention—you can display the incoming data in any HTML container you like.
Sau khi thiết lập tệp HTML, hãy sử dụng API tìm nạp JavaScripts để đăng dữ liệu [xe hơi] lên máy chủ.cars] to the server.
Đâ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. title= function[]{
// Get the reciever endpoint from Python using fetch:
fetch["//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]];
}
Kịch bản trên chứa một mảng JSON của những chiếc xe Rally. Chức năng Nút.Click là trình nghe sự kiện nhấp vào nút trong tệp HTML bạn đã tạo trước đó.button.click function is a click event listener attached to the button in the HTML file you created earlier.
Do đó, khi người dùng nhấp vào nút, Fetch sử dụng yêu cầu POST để gửi mảng xe đến máy chủ. Điểm cuối của người nhận trong bình nhận yêu cầu này và gửi dữ liệu phản hồi đến JavaScript [phần đầu], hiển thị trong bảng điều khiển trình duyệt.fetch uses the POST request to send the array of cars to the server. The receiver endpoint in Flask receives this request and sends response data to JavaScript [front end], which displays in the browser console.
Bây giờ, hãy khởi chạy tệp HTML trong trình duyệt của bạn và mở bảng điều khiển nhà phát triển [trên Windows: Ctrl + Shift + I, trên MAC: CMD + ALT + I]. Đi đến bảng điều khiển và bạn sẽ thấy phản hồi JSON được trả lại.Ctrl + Shift + I, on Mac: CMD + ALT + I]. Go to the Consolesection, and you'll see the returned JSON response.
Để theo dõi phản hồi JSON trong thời gian thực, nhấp vào mạng trong bảng điều khiển nhà phát triển [trên Chrome]. Bên dưới dòng thời gian mạng, chọn máy thu hoặc tên của điểm cuối bình của bạn. Sau đó nhấp vào phản hồi ở đầu của menu con đó.Network in the developer console [on Chrome]. Below the network timeline, select receiver or the name of your Flask endpoint. Then click Response at the top of that submenu.
Phản hồi sẽ trông giống như thế này:
Ảnh chụp màn hình: Không cần phân bổ
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 một phản hồi hợp lệ.Headers to view the response status of the request. This should be 200, which means your API has returned a valid response.
Tiếp theo, bây giờ bạn có thể viết 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. title= function[]{ // Get the receiver endpoint from Python using fetch:
fetch["//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 +=""+ Main.make+" "+" is a good product":
data.innerHTML +=""+ Main.make+" "+"is an average product" ]
}
].catch[[err] => console.error[err]]; }
Sử dụng hàm bản đồ, các vòng lặp tập lệnh trên thông qua dữ liệu phản hồi. Thuộc tính Main.make có tên của mỗi chiếc xe từ dữ liệu phản hồi được trả về từ máy chủ. Logic ternary trong hàm bản đồ sau đó hướng dẫn JavaScript về những gì cần hiển thị với mỗi lần thực hiện.map function, the above script loops through the response data. The Main.make attribute gets the name of each car from the response data returned from the server. The ternary logic within the map function then instructs JavaScript on what to display with each make.
Do đó, khi bạn nhấp vào nút Post, đây là những gì bạn nhận được:
Ảnh chụp màn hình: Không cần phân bổ
Có bạn đi! Bây giờ bạn đã biết cách thiết lập điểm cuối bình và đăng dữ liệu lên máy chủ không đồng bộ bằng cách sử dụng JavaScript.
Tiếp tục khám phá các API REST trong phát triển web
API cung cấp cách tốt nhất để tách phần phụ trợ của bạn khỏi phía trước. Một trong những lợi thế của nó là nó cho phép bạn tách rời phía máy khá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 đó chỉ là một vết xước của bề mặt.
Bạn có thể đào sâu hơn bằng cách kết nối API REST bình 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ữ để lưu trữ dữ liệu được đă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 trường biểu mẫu.