flask使用ajax提交表单

时间:2024-04-15 18:28:27

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("没有取得数据");
            }
        })
    }

就这样