這是一個燒瓶問題。
我有一個下拉選單和一個按鈕。我希望按下按鈕并將下拉串列的當前值發送回 python 函式。這個python函式會做一些事情并確定頁面的進一步內容。
如果我重定向到一個新頁面，我不需要使用任何 ajax，并且所選的值會被很好地傳遞回 python 函式。
如果我不重定向而是嘗試在同一頁面上呈現選定的值（這是我的要求），據我從本網站上的其他帖子中得知，我必須使用 Ajax 來呼叫 python 函式，但它是不捕獲選定的值。
另請注意頁面不應重新呈現的限制。
我真的很茫然，因為我不明白這兩種情況之間的區別。任何幫助將非常感激。我對 python 有很好的經驗，但 Flask 和 html 對我來說非常陌生。
見下面的代碼：
設定.py：
from app import app
# Data for initialisation of setup page
@app.route("/setup", methods=["GET", "POST"])
def create_models_dropdown():
# Gets used to create the dropdown
model_ids = list(range(1, 11))
return render_template ("setup.html", ids=model_ids)
# Further data to be added on button click
@app.route('/test', methods=["GET", "POST"])
def test():
###
# Debugging
print(request.form)
# When redirecting to a new page, this gives ImmutableMultiDict([('id_options', '5')]) (or whatever value is selected)
# So the data is being returned
# When staying on the same page (using the ajax script), this gives ImmutableMultiDict([]) so the dropdown value is not being returned
###
model_id = request.form.get("id_options") # succeeds/fails as per comments above
# Do something with the model_id
return jsonify(result=(model_id or -1) * 2)
設定.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<title>Wut</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
var $SCRIPT_ROOT = "";
</script>
</head>
<body>
<!--
action="{{ url_for('test') }}" will render the new page and work as expected
if i take it out, the result of running the script below will instead render
-->
<form action="{{ url_for('test') }}" method="post">
<select name="id_options" width="300px">
{% for id in ids %}
<option value="{{ id }}" SELECTED>{{ id }}</option>
{% endfor %}
</select>
<button class="get_result" type="button">Same page</button>
<button class="get_result">New page</button>
</form>
<div class="result"></div>
</body>
<script>
// This works in the sense that it calls the function
$(document).on('click', '.get_result', function () {
// Debugging
// This was another attempt to get the value from the dropdown and pass it back which also didn't work
// var model_id = $("#id_options").val();
// console.log(model_id)
//
$.ajax({
url: "/test",
type: "get",
// data: { model_id: model_id },
success: function (response) {
$(".result").html('<h1>' response.result.toString() '</h1>');
},
});
});
</script>
</html>
uj5u.com熱心網友回復：
您的選擇沒有 id 只有名稱。所以你使用
idie 的jquery#是不正確的。添加id="id_options"到您的select元素。要獲取選定的值，
model_id = document.getElementById("id_options").value;
或者
model_id = $("#id_options").find("option:selected").val();
- 在您的 Ajax 代碼中，您沒有提交表單，這意味著您不能使用
request.form. 而是嘗試request.values.get("model_id", None)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/365938.html
上一篇：使用一個資料庫的兩個燒瓶應用程式