JQuery異步post上傳表單數據的代碼怎么寫

今天小編給大家分享一下JQuery異步post上傳表單數據的代碼怎么寫的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

HTML代碼：

<form id="form"  enctype="multipart/form-data" method="post" >
    <input type="file" name="file1" id="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"><br>
    <input type="text" name="l1" id="" value="1"><br>
    <input type="number" name="l2" id="" value="2"><br>
    <input type="checkbox" name="l3" id="" ><br>
    <input type="submit" value="上傳數據">
</form>

jquery代碼：

$("#form").submit(function (e) { 
    e.preventDefault();//阻止表單刷新，也可以函數最后加上 return false；
    var formData = new FormData($("#form")[0]);//formData對象實例化的參數必須為DOM，加上[0]jquery對象轉為dom對象
    $.ajax({
        url:"http://0.0.0.1/api", /*接口域名地址*/
        type:'post',
        data: formData,
        contentType: false,
        processData: false,
        //如果是跨域請求，請加上下面四行
        //xhrFields: {
        //    withCredentials: true
        //},
        //crossDomain: true,
        success:function(res){
            console.log(res);
            //根據返回的JSON格式數據判斷數據傳輸狀態，這個看后端返回的啥數據，沒有標準。
            // if(res.data["code"]=="succ"){
            //     alert('成功');
            // }else if(res.data["code"]=="err"){
            //     alert('失敗');
            // }else{
            //     console.log(res);
            // }
        },
        error:function(error){
            console.log(error);
        }
    })
});

后端Flask數據處理：

@app.route('/api',methods=['GET','POST']) 
def api():
    # for item in request.form:
    #     print(item)
    d1 = request.form.get("l1")
    d2 = request.form.get("l2")
    d3 = request.form.get("l3")
    file = request.files.get('file') 
    print(file)
     dict = {"code":"200","data":"處理完畢"}
    return jsonify(dict)

以上就是“JQuery異步post上傳表單數據的代碼怎么寫”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。