Trong hướng dẫn này, chúng ta sẽ xem cách chuyển biến JavaScript sang biến Python trong Flask
Trong JavaScript, các biến lưu trữ dữ liệu có thể được sử dụng hoặc chỉnh sửa sau này. Thường được lấy làm đầu vào, các giá trị này thường được sử dụng ở phía máy chủ. Sử dụng Python Flask framework và AJAX, chúng ta có thể chuyển các giá trị JavaScript này sang hàm Python
Truyền biến JavaScript cho biến Python trong Flask
Chúng tôi sẽ đề cập đến hai thành phần cần thiết để thực hiện thao tác này
1. Trước tiên, chúng tôi sẽ tạo trang HTML của mình, với khu vực nhập liệu cơ bản và chức năng JavaScript để chuyển giá trị theo
Chúng tôi có một hàm title[] đang gọi hàm JavaScript senduserinfo[] của chúng tôi. Bây giờ, có một vài điều khoản để hiểu ở đây
- getElementByID là một phương thức trả về các giá trị có id khớp với chuỗi được cung cấp trong phương thức. Và mặc dù chúng tôi không chuyển bất kỳ giá trị nào cho hàm JavaScript, nhưng nó sẽ nhận được giá trị
- XMLHttpResponse[phương thức/URL] là một đối tượng AJAX. Nó được sử dụng trong việc gửi dữ liệu đến máy chủ web. Tạo một đối tượng XMLHttpResponse và chuyển giá trị của bạn qua nó
- JSON. stringify là một phương thức JSON phổ biến. Khi truyền dữ liệu đến máy chủ web, dữ liệu phải ở dạng chuỗi và. phương thức stringify giúp chúng ta làm điều đó
2. Bây giờ, chúng ta đến với mã bình. Dữ liệu đã được truyền vào hàm python và bây giờ chúng ta phải nhận nó. Hãy nhớ rằng, chúng tôi đã gửi dữ liệu ở định dạng chuỗi JSON và bây giờ chúng tôi phải mở nó. json. tải, nó nhận chuỗi JSON và chuyển đổi nó thành từ điển Python
Và, đây là cách bạn có thể chuyển một biến JavaScript được chuyển đến một hàm Python bằng Flask
Bạn cũng có thể tham khảo các hướng dẫn khác của tôi –
- Ma trận nhầm lẫn sử dụng scikit-learning trong Python
2 phản hồi cho "Làm cách nào để chuyển các biến JavaScript sang Python trong Flask?"
V nói.
Tháng Sáu 1, 2022 tại 3. 58 giờ sáng
Anh bạn này đã cứu mạng tôi hôm nay, cảm ơn rất nhiều
Đáp lại
eduardo nói.
Tháng Chín 26, 2022 tại 11. 45 giờ chiều
và nếu có nhiều hơn một biến mà tôi phải gửi cho python thì tôi sẽ làm như thế nào, tôi đã thử nhiều cách rồi mà không được
Bạn có thể muốn làm cho trang HTML của mình động bằng cách thay đổi dữ liệu mà không cần tải lại toàn bộ trang. Thay vì gửi một
const chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
4 HTML và thực hiện chuyển hướng để hiển thị lại mẫu, bạn có thể thêm JavaScript gọiconst chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
5 và thay thế nội dung trên trangconst chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
5 là giải pháp JavaScript tích hợp, hiện đại để thực hiện các yêu cầu từ một trang. Bạn có thể đã nghe nói về các phương thức và thư viện “AJAX” khác, chẳng hạn nhưconst chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
7 hoặc jQuery. Những thứ này không còn cần thiết trong các trình duyệt hiện đại, mặc dù bạn có thể chọn sử dụng chúng hoặc thư viện khác tùy thuộc vào yêu cầu của ứng dụng của bạn. Những tài liệu này sẽ chỉ tập trung vào các tính năng JavaScript tích hợpMẫu kết xuất¶
Điều quan trọng là phải hiểu sự khác biệt giữa mẫu và JavaScript. Các mẫu được hiển thị trên máy chủ, trước khi phản hồi được gửi đến trình duyệt của người dùng. JavaScript chạy trong trình duyệt của người dùng, sau khi mẫu được hiển thị và gửi đi. Do đó, không thể sử dụng JavaScript để tác động đến cách hiển thị mẫu Jinja, nhưng có thể hiển thị dữ liệu vào JavaScript sẽ chạy
Để cung cấp dữ liệu cho JavaScript khi hiển thị mẫu, hãy sử dụng bộ lọc
const chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
8 trong khốiconst chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
9. Thao tác này sẽ chuyển đổi dữ liệu thành đối tượng JavaScript hợp lệ và đảm bảo rằng mọi ký tự HTML không an toàn đều được hiển thị an toàn. Nếu bạn không sử dụng bộ lọc________số 8
const chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
Một mẫu ít phổ biến hơn là thêm dữ liệu vào thuộc tính
Tạo URL¶
Một cách khác để lấy dữ liệu từ máy chủ tới JavaScript là đưa ra yêu cầu cho nó. Trước tiên, bạn cần biết URL để yêu cầu
Cách đơn giản nhất để tạo URL là tiếp tục sử dụng
const chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
3Tuy nhiên, bạn có thể cần tạo một URL dựa trên thông tin mà bạn chỉ biết trong JavaScript. Như đã thảo luận ở trên, JavaScript chạy trong trình duyệt của người dùng, không phải là một phần của kết xuất mẫu, vì vậy bạn không thể sử dụng
Trong trường hợp này, bạn cần biết “URL gốc” mà ứng dụng của bạn được phục vụ theo đó. Trong các thiết lập đơn giản, đây là
Một cách đơn giản để báo mã JavaScript của bạn về thư mục gốc này là đặt nó làm biến toàn cục khi hiển thị mẫu. Sau đó, bạn có thể sử dụng nó khi tạo URL từ JavaScript
const chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
7Đưa ra yêu cầu với
const chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
3¶const chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
5 nhận hai đối số, một URL và một đối tượng với các tùy chọn khác và trả về mộtconst chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
30 cho lời hứa, không sử dụng cú pháp gọi lại hoặc cú phápconst chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
31 khác. Đọc các tài liệu MDN được liên kết để biết thêm thông tin về các tính năng đóTheo mặc định, phương thức GET được sử dụng. Nếu phản hồi chứa JSON, nó có thể được sử dụng với chuỗi gọi lại
const chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
30const chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
4Để gửi dữ liệu, hãy sử dụng một phương thức dữ liệu như POST và chuyển tùy chọn
const chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
33. Các loại dữ liệu phổ biến nhất là dữ liệu biểu mẫu hoặc dữ liệu JSONĐể gửi dữ liệu biểu mẫu, hãy chuyển một đối tượng
const chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
34 đã điền. Điều này sử dụng định dạng giống như biểu mẫu HTML và sẽ được truy cập bằngconst chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
35 trong chế độ xem Flaskconst chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
8Nói chung, nên gửi dữ liệu yêu cầu dưới dạng dữ liệu biểu mẫu, như sẽ được sử dụng khi gửi biểu mẫu HTML. JSON có thể biểu thị dữ liệu phức tạp hơn, nhưng trừ khi bạn cần điều đó, tốt hơn hết là bạn nên sử dụng định dạng đơn giản hơn. Khi gửi dữ liệu JSON, tiêu đề
const chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
36 cũng phải được gửi, nếu không Flask sẽ trả về lỗi 400const chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
0Chuyển hướng sau¶
Một phản hồi có thể là một chuyển hướng, chẳng hạn nếu bạn đã đăng nhập bằng JavaScript thay vì biểu mẫu HTML truyền thống và chế độ xem của bạn đã trả về một chuyển hướng thay vì JSON. Các yêu cầu JavaScript thực hiện theo các chuyển hướng, nhưng chúng không thay đổi trang. Nếu bạn muốn thay đổi trang, bạn có thể kiểm tra phản hồi và áp dụng chuyển hướng theo cách thủ công
const chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
1Thay thế nội dung¶
Phản hồi có thể là HTML mới, một phần mới của trang để thêm hoặc thay thế hoặc một trang hoàn toàn mới. Nói chung, nếu bạn đang trả về toàn bộ trang, sẽ tốt hơn nếu xử lý việc đó bằng chuyển hướng như đã trình bày trong phần trước. Ví dụ sau đây cho thấy cách thay thế một
const chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
37 bằng HTML được trả về bởi một yêu cầuconst chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
3Trả lại JSON từ Lượt xem¶
Để trả về một đối tượng JSON từ chế độ xem API của bạn, bạn có thể trực tiếp trả về một lệnh từ chế độ xem. Nó sẽ được tuần tự hóa thành JSON tự động
const chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
0Nếu bạn muốn trả về một loại JSON khác, hãy sử dụng hàm
const chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
38 để tạo một đối tượng phản hồi với dữ liệu đã cho được tuần tự hóa thành JSONconst chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
1Thường không nên trả lại dữ liệu tệp trong phản hồi JSON. JSON không thể biểu thị trực tiếp dữ liệu nhị phân, do đó, nó phải được mã hóa base64, có thể chậm, tốn nhiều băng thông hơn để gửi và không dễ lưu vào bộ đệm. Thay vào đó, hãy phân phát tệp bằng một chế độ xem và tạo URL tới tệp mong muốn để đưa vào JSON. Sau đó, khách hàng có thể thực hiện một yêu cầu riêng để lấy tài nguyên được liên kết sau khi nhận được JSON
Nhận JSON trong Chế độ xem¶
Sử dụng thuộc tính
const chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
39 của đối tượngconst chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
70 để giải mã phần thân của yêu cầu dưới dạng JSON. Nếu nội dung không phải là JSON hợp lệ hoặc tiêu đềconst chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
71 không được đặt thànhconst chart_data = {{ chart_data|tojson }} chartLib.makeChart[chart_data]
72, lỗi 400 Yêu cầu không hợp lệ sẽ xuất hiệnTôi có thể sử dụng JavaScript trong Flask không?
Bạn sẽ cần HTML để tạo trang web dựa trên Flask. Bạn không thực sự cần CSS hoặc JavaScript , nhưng rất có thể bạn sẽ muốn sử dụng CSS hoặc JavaScript, tùy thuộc vào những gì bạn cần trang web của mình . Bạn có thể chứa các tệp CSS và JS dưới dạng tệp 'tĩnh' trong bản dựng Flask của mình.Bạn có thể gọi hàm JS trong HTML không?
Chúng tôi cũng có thể gọi các hàm JavaScript bằng cách sử dụng tệp JavaScript bên ngoài được đính kèm với tài liệu HTML của chúng tôi . Để làm điều này, trước tiên chúng ta phải tạo một tệp JavaScript và xác định chức năng của chúng ta trong đó và lưu nó với [. Js] tiện ích mở rộng. Khi tệp JavaScript được tạo, chúng ta cần tạo một tài liệu HTML đơn giản.