flask使用ajax提交表单

时间:2023-03-10 05:20:25
flask使用ajax提交表单

Flask中使用ajax提交表单刷新数据,避免提交表单后使用return render_temp()会刷新页面

<form id ="test_form">
{{ form.hidden_tag() }}
<div id="input-top">
<div class="form-group">
<label>开始日期</label>
{{ form.begin_date }}
<label>结束时间</label>
{{ form.end_date }}
</div>
</div>
<!--{{ form.submit(class = "querybtn",onclick="ajaxForm()") }}--><!--这里如果用这个会造成表单提交两次,而且第二次是get会刷新页面-->
<button type="button" class = "querybtn" onclick="ajaxForm()">Click Me!</button>
</form>

最下边加一个按钮,点击的时候调用js中ajax的函数

ajax这边这么写

    function ajaxForm(){
varifyinput();
var form= new FormData(document.getElementById("test_form"));
$.ajax({
url:"{{ url_for('main.all_revenue') }}",
type:"post",
data:form,
dataType: 'json',
processData:false,
contentType:false,
success:function(data){
create_table(data.result);
},
error:function(e){
alert("没有取得数据");
}
})
}

就这样