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對象轉(zhuǎn)為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ù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
基于jquery實現(xiàn)的表格分頁實現(xiàn)代碼
該方法的運用是從后臺數(shù)據(jù)庫中一次性取出所有的數(shù)據(jù),運用Jquery把一部分數(shù)據(jù)隱藏起來,事實上數(shù)據(jù)還是全部在html頁面中2011-06-06jQuery內(nèi)容折疊效果插件用法實例分析(附demo源碼)
這篇文章主要介紹了jQuery內(nèi)容折疊效果插件用法,結(jié)合實例形式分析了jQuery展開折疊插件jquery.coolfieldset.js的具體使用技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04