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 Show
Đầ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 Các bạn đọc like ủng hộ MUO nhé. Khi bạn mua hàng bằng các liên kết trên trang web của chúng tôi, chúng tôi có thể kiếm được hoa hồng liên kết. Đọc thêmBạ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à FlaskNế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 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ìnhTiế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 Đ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 POSTTrong 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ờ Đăng dữ liệu từ JavaScript lên Python Flask APIVì đ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 Đá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 Đ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
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 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
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 webAPI 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ể truyền thông tin đơn giản bằng cách ghép các cặp khóa và giá trị cùng với bất kỳ URL nào hoặc bạn có thể sử dụng các thẻ HTML
Bạn có thể đính kèm Python vào HTML không?Dự án PyScript mới cho phép bạn nhúng trực tiếp các chương trình Python vào các trang HTML và thực thi chúng trong trình duyệt mà không cần bất kỳ yêu cầu dựa trên máy chủ nào.
Làm cách nào để lấy dữ liệu từ biểu mẫu HTML bằng Python?lời yêu cầu. hình thức. get(“fname”) sẽ lấy đầu vào từ giá trị Đầu vào có thuộc tính name là fname và lưu trữ trong biến first_name lời yêu cầu. hình thức. get(“lname”) sẽ nhận đầu vào từ giá trị Đầu vào có thuộc tính tên là lname và lưu trữ trong biến last_name |