JQuery異步post上傳表單數(shù)據(jù)標(biāo)準(zhǔn)化模板
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對(duì)象實(shí)例化的參數(shù)必須為DOM,加上[0]jquery對(duì)象轉(zhuǎn)為dom對(duì)象
? ? $.ajax({
? ? ? ? url:"http://0.0.0.1/api", /*接口域名地址*/
? ? ? ? type:'post',
? ? ? ? data: formData,
? ? ? ? contentType: false,
? ? ? ? processData: false,
? ? ? ? //如果是跨域請(qǐng)求,請(qǐng)加上下面四行
? ? ? ? //xhrFields: {
? ? ? ? // ? ?withCredentials: true
? ? ? ? //},
? ? ? ? //crossDomain: true,
? ? ? ? success:function(res){
? ? ? ? ? ? console.log(res);
? ? ? ? ? ? //根據(jù)返回的JSON格式數(shù)據(jù)判斷數(shù)據(jù)傳輸狀態(tài),這個(gè)看后端返回的啥數(shù)據(jù),沒(méi)有標(biāo)準(zhǔn)。
? ? ? ? ? ? // 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)到此這篇關(guān)于JQuery異步post上傳表單數(shù)據(jù)標(biāo)準(zhǔn)化模板的文章就介紹到這了,更多相關(guān)JQuery異步post上傳表單數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于jquery實(shí)現(xiàn)的表格分頁(yè)實(shí)現(xiàn)代碼
該方法的運(yùn)用是從后臺(tái)數(shù)據(jù)庫(kù)中一次性取出所有的數(shù)據(jù),運(yùn)用Jquery把一部分?jǐn)?shù)據(jù)隱藏起來(lái),事實(shí)上數(shù)據(jù)還是全部在html頁(yè)面中2011-06-06
jQuery的ready方法實(shí)現(xiàn)原理分析
這篇文章主要介紹了jQuery的ready方法實(shí)現(xiàn)原理分析的相關(guān)資料,需要的朋友可以參考下2016-10-10
jquery對(duì)象和DOM對(duì)象的區(qū)別介紹
jquery對(duì)象和DOM對(duì)象在使用過(guò)程很頻繁,正是因?yàn)槿绱?,好多朋友都不知道它們之間有什么區(qū)別,下面為大家詳細(xì)介紹下,希望對(duì)大家有所幫助2013-08-08
jquery 實(shí)現(xiàn)復(fù)選框的全選操作實(shí)例代碼
這篇文章主要介紹了jquery 實(shí)現(xiàn)復(fù)選框的全選操作實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-01-01
jQuery內(nèi)容折疊效果插件用法實(shí)例分析(附demo源碼)
這篇文章主要介紹了jQuery內(nèi)容折疊效果插件用法,結(jié)合實(shí)例形式分析了jQuery展開(kāi)折疊插件jquery.coolfieldset.js的具體使用技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04
JS中Array數(shù)組學(xué)習(xí)總結(jié)
本文主要介紹了JS中Array數(shù)組的相關(guān)知識(shí)。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01

