Hướng dẫn how do i pass data from python flask to javascript? - làm cách nào để chuyển dữ liệu từ python flask sang javascript?

2020.12.03

この 記事 約 約 分 読め 読め ます。約9分で読めます。

Cách chuyển các biến từ Python sang JavaScript (tập lệnh nội tuyến / tập lệnh bên ngoài) Đây là một bài viết liên quan đến Flask hoặc Jinja2, nhưng cách xử lý các đối tượng được tạo ở phía máy chủ với Python (liệt kê dữ liệu lần này) ở phía JS tôi sẽ giải thích về.

Cần phải chuyển dữ liệu từ phía Python sang phía JS bằng mọi cách trong việc thực hiện ứng dụng tính toán và hiển thị chi phí cuộc họp được thực hiện với bình được thực hiện để chơi bất cứ lúc nào (đó là một JS thông thường Nhiệm vụ của người mới bắt đầu) Vì vậy, đây là một lời giải thích về cách thực hiện.

Tổng quan hình ảnh

Là một hình ảnh, việc xử lý như sau.

Ngay cả khi bạn vượt qua các đối số với App.Route in Python, JS không thể xử lý nó trừ khi bạn gây rối với nó một chút, vì vậy bạn cần xác định lại nó bên trong thẻ script của Jinja (tệp mẫu / HTML) một lần. Có một cách để xử lý trực tiếp, nhưng tôi sẽ không giới thiệu nó lần này, vì vậy nếu bạn cần, vui lòng tạo nó trong khi nhìn vào tài liệu.

Tổng quan về cấu trúc / mã tệp thực tế

Cấu trúc tập tin

Cấu trúc tập tin như sau. Chỉ xem / mẫu mà không có mô hình.

-workspace
  |--static
         |---js
               |--sample.js
         |--stylesheet
               |--stylesheet.css
 |--templates
         |--base.html
         |--test_page.html
|--app.py

Tổng quan về mã

Giải thích 3 kịch bản sau: app.py/ test_page.html/ sample.js

~app.py~

rom flask import Flask
from flask import render_template, url_for
from flask import request

app = Flask(__name__)

input_from_python = ["a","b","c"]　　＃　transfer data

@app.route('/')
def index_render():
    return render_template("index.html")

@app.route('/testpage')
def test_page_view():
    return render_template("test_page.html", input_from_python= input_from_python)　　＃here!! transfer

if __name__ == '__main__':
    app.run(debug=True)

Trong app.py, khi / testpage được gọi, nó được hiển thị và một đối tượng được gọi là input_from_python được truyền.

~test_page.html~

{% block head %}
    
{% endblock %}


{% block content %}
    
    

    
{{ input_from_python | tojson }}
    
from_html_file
    
from_html_original
    
from_js_file
    
from_js_original
    test_from_html
    test_from_html2
    test_from_js
    test_from_js_original

{% endblock %}

【Điểm quan trọng】

Trong, như Let Let List_data = {{input_from_python | Tojson}} Xác định lại đối tượng nhận được từ Python trong biến list_data. Bằng cách này, nó trở thành một biến có thể được xử lý ở phía JS.redefining the object received from python in the list_data variable. By doing this, it becomes a variable that can be handled on the js side.

Sau đó, khoảng 4 nút được cài đặt và thuộc tính onclick của mỗi nút gọi tập lệnh của mỗi hàm JS (cả script inline và sample.js).

~sample.js~

function add_reversed_data_from_js() {
    let list_data2= list_data.push("test_input_from_js");

    document.getElementById("output_from_js").innerHTML = "from_js:" + list_data2;
}

function add_data_from_js(){
    document.getElementById("output_from_js2").innerHTML = "from_js_original:" +list_data;

}

Kết quả thực thi

Dán kết quả thực thi với ảnh chụp màn hình.

Bấm vào trước khi nhấp vào:

Sau khi nhấp vào nút:

Bạn có thể thấy rằng kết quả thực thi của JS được xử lý bởi JS (tập lệnh nội tuyến / tập lệnh bên ngoài) được trả lại cho mỗi phần thẻ p. Tôi đã có thể hiển thị một cách an toàn kết quả thực thi trong HTML thông qua xử lý JS.

BẢN TÓM TẮT

Tôi không nghĩ rằng nó đặc biệt khó khăn, nhưng tôi đã giới thiệu cách chuyển các biến cho JS qua Jinja.

Tôi đang thực hiện một công cụ tính toán chi phí cuộc họp bằng cách sử dụng bình theo yêu cầu khác và việc triển khai dự kiến ​​sẽ sớm được hoàn thành, vì vậy tôi muốn đưa ra công cụ đơn giản hóa ngay khi hoàn thành. (Thành thật mà nói, JS là một công cụ mà tôi nghĩ là dễ dàng hơn.)