Hướng dẫn pass data from python to javascript - chuyển dữ liệu từ python sang javascript

Question

Thời gian đọc ước tính: 4 phút4 minutes

Nội dung chính Show

Bước 1 - Những tệp nào được tạo?
Bước 2 - Tổng quan về mã App.Py
Bước 3 - Chỉ mục.html Tổng quan
Bước 4 - Đầu ra trông như thế nào!
Để chuyển các biến từ bình python sang javascript, chúng ta có thể gọi render_template với đối số dữ liệu với từ điển dữ liệu chúng ta muốn chuyển đến mẫu. Để gọi Render_Template với tên tệp mẫu và dữ liệu được đặt thành Dữ liệu Dict với dữ liệu chúng tôi muốn chuyển đến mẫu.
Làm cách nào để chuyển dữ liệu từ bình python sang javascript?
số var =;.
Làm thế nào tôi có thể chuyển dữ liệu từ bình sang javascript trong một mẫu?

Trong bài đăng trên blog gần đây của chúng tôi, cách truyền một biến JavaScript sang Python bằng JSON, chúng tôi đã trình diễn cách dễ dàng sử dụng AJAX để truyền bất kỳ dữ liệu nào bạn muốn và sau đó thao tác với Python.

Trong bài đăng trên blog này, chúng tôi sẽ chỉ ra cách làm điều này theo cách khác. Kịch bản là bạn có một ứng dụng và trang web muốn sử dụng dữ liệu được tạo thông qua Python, nhưng hãy để JavaScript sau đó sử dụng nó trong ứng dụng.

Vì Python có thể được kết nối với nhiều cơ sở dữ liệu và tệp (TXT, Excel), v.v., phần logic này rất hữu ích cho các lập trình viên muốn tích hợp cả hai ngôn ngữ lập trình.

Hãy bắt đầu xem xét mã và xem làm thế nào điều này có thể đạt được.

Bước 1 - Những tệp nào được tạo?

Chương trình này sử dụng bình Python để tạo một trang web, có menu thả xuống. Hai tệp được sử dụng để tạo ra đây là như sau:

.

(B) Index.html - Đây là tệp mẫu tải vào trình duyệt và chạy tất cả JavaScript. JavaScript được tải ở đây cũng tải dữ liệu python được truyền từ app.py

Bước 2 - Tổng quan về mã App.Py

Thư viện Python cho phép tạo trang web được gọi là bình và như có thể thấy bên dưới nó phải được nhập.

Ngoài ra, chúng tôi cũng cần nhập Render_Template, trong đó yêu cầu chương trình chuyển đến thư mục mẫu và tải chỉ mục.html.

Biến được truyền cho JavaScript được gọi là tên và đây là những giá trị mà bạn sẽ thấy trong trình duyệt web khi được tải.name, and these are the values that you will see in the web browser when it is loaded.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    name = ['Joe','John','Jim','Paul','Niall','Tom']
    return render_template('index.html', name=name)

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

Bước 3 - Chỉ mục.html Tổng quan

Dưới đây là tệp HTML mẫu chạy trong trình duyệt. Bạn có thể thêm CSS, v.v. để làm cho nó trông đẹp hơn và thân thiện hơn với người dùng.

Như bạn có thể thấy nó có các thẻ HTML thông thường xuất hiện như một phần của trang web.

Hãy nhìn vào một số mã xa hơn:

Trong bit này, đây là menu thả xuống sẽ xuất hiện khi index.html được mở. Nó sẽ lưu trữ tất cả các giá trị được truyền từ Python. Lưu ý rằng ID của nó là chọn Chọn, điều này sẽ được sử dụng sau này.

Các phần chính để tập trung vào tiếp theo là giữa. Đây là những gì đọc trong dữ liệu Python và điền vào menu thả xuống.

Trong Bước 2, chúng tôi đã đề cập rằng có một biến có tên là Tên Tên, với các giá trị sẽ được truyền qua.

Điều này đã đạt được trên dòng này:

var select = document.getEuityById (Hồi chọn), test = {{name | tojson}};

Lưu ý rằng tên xuất hiện ở đây và điều này đang đề cập lại với cùng một giá trị chính xác đã được thảo luận trong Bước 2.

Đối với phần còn lại của các dòng, tôi đã giải thích với nhận xét những gì mỗi người làm.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pass Python variable to Javascript</title>
</head>
<body>

<select id ='selectvalue'>
</select>
<script>
    //name = ['Joe','John','Jim','Paul','Niall','Tom']

    var selectvalue = document.getElementById("selectvalue"), test = {{ name | tojson }};
    //The increment operator (++) increments (adds one to) its operand and returns a value.
    for(var i = 0; i < test.length; i++) // This line checks for the length of the data you feeding in i.e the no of items
         {
var selection = document.createElement("OPTION"), // This line creates a variable to store the different values fed in from the JSON object "TEST"
txt = document.createTextNode(test[i]); // This just reads each value from the test JSON variable above
selection.appendChild(txt); // This line appends each value as it is read.
selection.setAttribute("value",test[i]); // This line sets each value read in as a value for the drop down
selectvalue.insertBefore(selection,selectvalue.lastChild); //This reads eah value into the dropdown based on the order in the "TEST" above.
 }
</script>
</body>
</html>

Bước 4 - Đầu ra trông như thế nào!

Từ bước 2, đây là những giá trị mà chúng tôi yêu cầu được sử dụng trong JavaScript để đưa ra một bản thả xuống:

Tên = [‘Joe ,, John John ,, Jim, Jim, Paul, Paul,

Biến Python được truyền cho JavaScript

Bạn có thể sử dụng {{ variable }} bất cứ nơi nào trong mẫu của mình, không chỉ trong phần HTML. Vì vậy, điều này sẽ hoạt động:

<html>
<head>
  <script>
    var someJavaScriptVar = '{{ geocode[1] }}';
  </script>
</head>
<body>
  <p>Hello World</p>
  <button onclick="alert('Geocode: {{ geocode[0] }} ' + someJavaScriptVar)" />
</body>
</html>

Hãy nghĩ về nó như là một quá trình hai giai đoạn: Đầu tiên, Jinja (bình cơ động mẫu sử dụng) tạo ra đầu ra văn bản của bạn. Điều này được gửi đến người dùng thực thi JavaScript mà anh ta nhìn thấy. Nếu bạn muốn biến bình của mình có sẵn trong JavaScript dưới dạng mảng, bạn phải tạo định nghĩa mảng trong đầu ra của mình:

<html>
  <head>
    <script>
      var myGeocode = ['{{ geocode[0] }}', '{{ geocode[1] }}'];
    </script>
  </head>
  <body>
    <p>Hello World</p>
    <button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" />
  </body>
</html>

Jinja cũng cung cấp các cấu trúc nâng cao hơn từ Python, vì vậy bạn có thể rút ngắn nó thành:

<html>
<head>
  <script>
    var myGeocode = [{{ ', '.join(geocode) }}];
  </script>
</head>
<body>
  <p>Hello World</p>
  <button onclick="alert('Geocode: ' + myGeocode[0] + ' ' + myGeocode[1])" />
</body>
</html>

Bạn cũng có thể sử dụng các vòng lặp for, các câu lệnh if và nhiều hơn nữa, xem tài liệu Jinja2 để biết thêm.

Ngoài ra, hãy xem câu trả lời của Ford, người chỉ ra bộ lọc tojson, một bổ sung cho bộ bộ lọc tiêu chuẩn của Jinja2.

Chỉnh sửa tháng 11 năm 2018: tojson hiện được bao gồm trong bộ bộ lọc tiêu chuẩn của Jinja2.

Để chuyển các biến từ bình python sang javascript, chúng ta có thể gọi render_template với đối số dữ liệu với từ điển dữ liệu chúng ta muốn chuyển đến mẫu. Để gọi Render_Template với tên tệp mẫu và dữ liệu được đặt thành Dữ liệu Dict với dữ liệu chúng tôi muốn chuyển đến mẫu.

Python có thể giao tiếp với JavaScript không?that's easy with an application programming interface (API). Programming languages communicate and exchange data using APIs.

Làm cách nào để chuyển dữ liệu từ bình python sang javascript?

Trong cơ thể HTML và tạo một mẫu trong ID thẻ, ví dụ, sử dụng chỉ mục danh sách trong ID thẻ và giá trị danh sách tại tên lớp thẻ ...

.

số var =;.

.

số var =;.

Làm thế nào truyền dữ liệu từ JavaScript sang Python?open it. json. loads, it receives the JSON string and converts it to a Python dictionary. And, this is how you can pass a JavaScript variable is passed to a Python function using Flask.

Làm thế nào tôi có thể chuyển dữ liệu từ bình sang javascript trong một mẫu?

Để chuyển các biến từ bình python sang javascript, chúng ta có thể gọi render_template với đối số dữ liệu với từ điển dữ liệu chúng ta muốn chuyển đến mẫu.Để gọi Render_Template với tên tệp mẫu và dữ liệu được đặt thành Dữ liệu Dict với dữ liệu chúng tôi muốn chuyển đến mẫu.call render_template with the data argument with the dictionary of data we want to pass to the template. to call render_template with the template file name and the data set to the data dict with the data we want to pass to the template.

programming python