gpt4 book ai didi

javascript - 对 flask render_template 进行 AJAX 调用的问题

转载 作者:行者123 更新时间:2023-11-30 19:51:18 25 4
gpt4 key购买 nike

假设我有两个单选按钮(标记为 1 和 2)和页面底部的一些文本。默认情况下,文本的值为 -1,并且未选中任何复选框。如果我单击其中一个单选按钮,我想根据所选的单选输入将文本的值更改为 1 或 2。为此,我将代码基于 AJAX call described here .这是代码:

你好.py

from flask import (
Flask, render_template, request
)

app = Flask(__name__)


@app.route('/', methods=('GET', 'POST'))
def hello():
level = -1
print(request.method)
if request.method == 'POST':
level = int(request.form.get('level', False))
return render_template('test.html', value=level)

templates/test.html

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<body>
<form>
<input name="level" type="radio" id="1">1</input>
<input name="level" type="radio" id="2">2</input>
</form>
{{ value }}
</body>
<script>
$(function() {
$('input[type=radio]').change(function() {
console.log( $( this ).attr("id"));
$.ajax({
type: "POST",
data: { level: $( this ).attr("id") },
success: function(response) {
console.log("HERE");
document.write(response);
},
});
});
});
</script>
</html>

当我调用 flask run 时,选择任一单选按钮会将值更改为 12 但我无法选择任一单选按钮第二次。页面会卡在第二个选择上,不知道怎么回事。

注意:虽然这看起来有点矫枉过正,但在我正在处理的较大项目中有一个更复杂的表单提交,这只是一个 MVCE。

最佳答案

由于存在动态内容创建,您需要将 change 事件处理程序锚定到外部标记:

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"> </script>
<body>
<div class='wrapper'>
<form>
<input name="level" type="radio" id="1">1</input>
<input name="level" type="radio" id="2">2</input>
</form>
<p>{{ value }}</p>
</div>
</body>
<script>
$(document).ready(function(){
$('.wrapper').on('change', 'input[type=radio]', function(){
console.log( $( this ).attr("id"));
$.ajax({
type: "POST",
data: { level: $( this ).attr("id") },
success: function(response) {
console.log("HERE");
$('p').text(response.toString());
},
});
});
});
</script>
</html>

关于javascript - 对 flask render_template 进行 AJAX 调用的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54431922/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com