我有一張桌子。因此，我希望獲取 td 標記的值并在單擊該標記時傳遞給 python 函式。
HTML 代碼：
<table border=5 id="mytable">
<thead>
<td>Erp</td>
<td>Status</td>
<td>name</td>
<td>Days</td>
</thead>
{% for tr in df_excel_data%}
<tr>
<td onclick="passvaluefun()">{{tr[0]}}</td>
<td>{{tr[1]}}</td>
<td>{{tr[2]}}</td>
<td>{{tr[3]}}</td>
</tr>
{% endfor %}
</table>
代碼：
<script>
var table = document.getElementById('mytable'),
cells = table.getElementsByTagName('td');
for (var i=0,len=cells.length; i<len; i ){
cells[i].onclick = function(){
console.log(this.innerHTML);
}
}
</script>
我可以通過使用 javascript 來獲取值，但我無法將值傳遞給燒瓶中的 python 函式。我只想將點擊的 td 標簽的值傳遞給我的 python 函式。
uj5u.com熱心網友回復：
首先要理解這一點：您的 JavaScript 代碼在客戶端上運行與您在服務器上運行的 Python 代碼完全分開。讓它沉入其中，直到你理解它，然后繼續閱讀這個問題。這是很多初學者絆倒的事情，最終導致很多糟糕的設計選擇。
從瀏覽器向服務器發送資料有兩種方式。它們是表單和 AJAX。表單正是它們聽起來的樣子：您填寫輸入（文本框、復選框、單選按鈕等），然后以非常標準的方式將其發送到服務器。表單是最先發明的，但它們提供的靈活性很小，并且不能很好地與 JavaScript 集成，因此發明了 AJAX。AJAX 通過從 JavaScript 呼叫一些函式來將任意資料發送到服務器來作業。表單更容易使用，所以盡可能使用表單，但是在這種情況下，您需要更多的控制并且需要使用 AJAX。
在 2022 年，進行 AJAX 呼叫的最佳方式是使用Fetch API。以下是它的作業原理：
首先，在您的 Flask 應用程式中創建一個 POST 處理程式以接收 JSON 資料。有關更多資訊，請參閱此問題。這是我的基本示例：
from flask import Flask, request, jsonify
# ... more code ...
@app.route('/api/getTableData', methods=['POST'])
def getTableData():
value = request.json['value']
print(value)
# do something with the "value" variable
# optionally, you can send a response back to your JavaScript code
return jsonify({"response": "It works!"})
完成后，您需要撰寫客戶端 JavaScript 來進行 AJAX 呼叫。這部分比較簡單：
const table = document.getElementById('mytable'),
cells = table.getElementsByTagName('td');
for (let i = 0, len = cells.length; i < len; i ) {
cells[i].addEventListener('click', async () => {
const resp = await fetch('http://YOUR_FLASK_SERVER/api/getTableData', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
value: cells[i].textContent,
}),
});
// if the server sends a response, then it will be alerted here
const json = await resp.json();
alert('Server sent response: "' json.response '"');
});
}
確保更改YOUR_FLASK_SERVER為您的燒瓶服務器的地址。這大概是localhost:5000。
注意：我從不使用 ES6 JavaScript 語法。這是可選的，但是因為它使用了 Promise，所以使用 Fetch API 變得更加容易。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/522524.html
標籤：Pythonhtml烧瓶