我想通过使用 ajax 发出帖子请求。我想使用输入值作为函数参数并将函数返回附加到 html 表中。我不知道,但我认为我的代码是错误的并且 ajax 不起作用。
注意:为了测试,我正在获取输入值并返回到 html 页面。
网络.html
<script type="text/javascript">
$(function(){
$('#button').click(function(){
var dados = $('#search-input').val();
$.ajax({
url: '/network',
data: $('form').serialize(),
type: 'POST',
success: function(data){
$('#result').append(data)
console.log(data);
},
error: function(error){
console.log(error);
}
});
});
});
</script>
<form name='form' method="POST">
<input type="text" name="search-input" id="search-input" class="form-control" placeholder="Users and ID" >
<button type="submit" class="btn btn-primary" id="button">Search</button>
</form>
<span id=result>{% print dado %}</span>
应用程序
@app.route('/network',methods=['POST','GET'])
def network():
if request.method == 'POST':
input = request.form['search-input']
return render_template('network.html',dado=input)
else:
return render_template('network.html',dado='')
编辑:此更新后返回的是 JSON 格式
{
"dado": "INPUT VALUE"
}
应用程序
@app.route('/network',methods=['POST','GET'])
def network():
if request.method == 'POST':
input = request.form['search-input']
return jsonify(dado=input)
else:
return render_template('network.html',dado='')
网络.html
<script type="text/javascript">
$(function(){
$('#botao').click(function(){
var dados = $('#search-input').val();
$.ajax({
url: "{{ url_for('network') }}",
data: JSON.stringify(dados),
contentType: 'application/json;charset=UTF-8',
type: 'POST',
success: function(data){
$('#result').append(data["dado"])
console.log(data);
},
error: function(error){
console.log(error);
}
});
});
});
</script>
你必须返回 JSON!代替return render_template(...)
,使用:
return jsonify(dado = input)
然后在您的 ajax 成功调用中:
success: function(data){
$('#result').append(data["dado"])
console.log(data);
}
...
}); // end AJAX
e.preventDefault();
不要忘记导入jsonify
from flask import jsonify
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句