JQuery異步post上傳表單數(shù)據(jù)標準化模板

更新時間：2022年02月21日 11:53:49 作者：Crayon鑫

這篇文章主要介紹了JQuery異步post上傳表單數(shù)據(jù)標準化模板，主要分享詳細的代碼，具有一的的知識參考性，需要的小伙伴可以參考一下

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="上傳數(shù)據(jù)">
</form>

jquery代碼：

$("#form").submit(function (e) {?
? ? e.preventDefault();//阻止表單刷新，也可以函數(shù)最后加上 return false；
? ? var formData = new FormData($("#form")[0]);//formData對象實例化的參數(shù)必須為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);
? ? ? ? ? ? //根據(jù)返回的JSON格式數(shù)據(jù)判斷數(shù)據(jù)傳輸狀態(tài)，這個看后端返回的啥數(shù)據(jù)，沒有標準。
? ? ? ? ? ? // if(res.data["code"]=="succ"){
? ? ? ? ? ? // ? ? alert('成功');
? ? ? ? ? ? // }else if(res.data["code"]=="err"){
? ? ? ? ? ? // ? ? alert('失敗');
? ? ? ? ? ? // }else{
? ? ? ? ? ? // ? ? console.log(res);
? ? ? ? ? ? // }
? ? ? ? },
? ? ? ? error:function(error){
? ? ? ? ? ? console.log(error);
? ? ? ? }
? ? })
});

后端Flask數(shù)據(jù)處理：

@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上傳表單數(shù)據(jù)標準化模板的文章就介紹到這了,更多相關JQuery異步post上傳表單數(shù)據(jù)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: