Cách gửi dữ liệu từ python sang html

Hướng dẫn về bình Python này sẽ chỉ cho bạn cách tạo trang biểu mẫu html gửi dữ liệu đầu vào của người dùng đến trang HTML thứ hai hiển thị phản hồi tính toán

Đầu tiên chúng ta sẽ tạo một tệp có tên là “form. html” trong thư mục dự án của chúng tôi. Tập tin này sẽ chứa đoạn mã sau

Bạn đang tự hỏi làm thế nào bạn có thể gửi dữ liệu từ JavaScript sang Python?

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, công nghệ phụ trợ [nhà cung cấp API] sẽ phản hồi 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;

Cài đặt máy chủ Python và Flask

Nếu bạn đang dùng Windows và chưa cài đặt Python, hãy tải xuống từ python. trang web tổ chức. Người dùng Mac không cần tải xuống Python vì hệ điều hành đi kèm 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

Cài đặt và cài đặt máy chủ

Bạn sẽ cần một máy chủ để tạo API Python REST. Có nhiều khung web Python cho việc này. Flask, Django, FastAPI, Tornado và nhiều thứ khác có ích để viết 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 Flask và bình-cors bằng pip

 pip install Flask, flask-cors
 

Gói jar-cors là mô-đun CORS tích hợp của Flask để bỏ qua chính sách tài nguyê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 xương bình

Tiếp theo, tạo một tệp mới trong thư mục gốc của 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à ứng dụng. 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 cần thiết và định cấu hình ứng dụng của bạn. Mã bổ sung ở phần cuối [ứng dụng. run[]] đặt ứng dụng chạy trên cổng mặc định, thường là cổng 5000

Tạo Đ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 ô tô khác nhau và các kiểu xe của chúng từ JavaScript đến máy chủ bằng cách sử dụng điểm cuối Flask. Trong JavaScript của bạn, bạn sẽ gán dữ liệu cho một biến có tên là xe ô tô. Bạn có thể đặt cho nó bất kỳ tên nào bạn thích, mặc dù

Nhưng trước tiên, hãy mở ứng dụng. py, thiết lập điểm cuối API POST và gọi nó là bộ thu. 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 của 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 dự án của bạn [nơi chứa ứng dụng bình của bạn]. Đặt cho họ bất kỳ tên nào bạn thích [dữ liệu. js và chỉ mục. html trong trường hợp này]

Nhưng trước tiên, đây là cách lập chỉ mục. giao diện html

 

    
        
            Python sending
        
    
    
        Post to Python
        

        
        
    
 

Đá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

Thẻ h3 đóng vai trò là nơi chứa 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 muốn

Có liên quan. Cách kiểm tra API bằng Python và JavaScript

Sau khi thiết lập tệp HTML, hãy sử dụng API Tìm nạp tích hợp của JavaScript để đăng dữ liệu [ô tô] lê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. 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]];
            
           }
 

Đoạn script trên chứa một mảng JSON của những chiếc xe đua. cái nút. chức năng nhấp chuột là trình xử lý sự kiện nhấp chuột được đính kèm với 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 nạp sử dụng yêu cầu POST để gửi mảng ô tô đến máy chủ. Điểm cuối máy thu 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 trình duyệt

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 dành cho nhà phát triển [trên Windows. Ctrl + Shift + I, trên máy Mac. CMD + ALT + I]. Chuyển đến phần Bảng điều khiển và bạn sẽ thấy phản hồi JSON được trả về

Có liên quan. Cách sử dụng Chrome DevTools để khắc phục sự cố trang web

Để 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, chọn bộ thu hoặc tên của điểm cuối Flask của bạn. Sau đó nhấp vào Phản hồi ở đầu menu con đó

Câu trả lời sẽ giống như thế này

Ảnh chụp màn hình. không cần quy kết

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. Giá trị này phải là 200, có nghĩa là API của bạn đã trả về phản hồi hợp lệ

Tiếp theo, bây giờ bạn có thể ghi dữ liệu vào DOM bằng logic bổ sung trong JavaScript của mình

 // 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 chức năng bản đồ, tập lệnh trên lặp qua dữ liệu phản hồi. chính. thuộc tính tạo lấy tên của từng ô tô từ dữ liệu phản hồi được trả về từ máy chủ. Sau đó, logic bộ ba trong chức năng bản đồ sẽ 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

Ảnh chụp màn hình. không cần quy kết

của bạn đi. 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á 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ần trước. Một trong những ưu điểm của nó là nó cho phép bạn tách rời phía máy khách khỏi phía máy chủ một cách dễ dàng. Bạn đã biết cách kết nối JavaScript với Python và gửi dữ liệu đến máy chủ, nhưng đó chỉ là sơ lược về bề ngoài

Bạn có thể tìm hiểu sâu hơn bằng cách kết nối Flask REST API 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 dự án 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

Làm cách nào để gửi giá trị từ Python sang HTML?

Bạn có thể đính kèm Python vào HTML không?

Làm cách nào để lấy dữ liệu từ biểu mẫu HTML bằng Python?