python中前後端通訊方法Ajax和ORM對映（form表單提交）
阿新 • • 發佈：2018-10-31
後端從資料庫獲取資料給到前端：
第一種方式：
admin.py檔案程式碼：
@admin.route('/showList') def show(): # 獲取資料庫所有文章資料，得到一個個物件 res=Article.query.all() dicts=[] # 將每一個物件轉成字典並加入一個列表，再用jinja模板將資料渲染到檢視html中 for item in res: dicts.append(item.__dict__) print('讀取所有內容',dicts) print('每一個欄位的值',dicts[0]['title']) # 將資料dicts=dicts傳到articleList.html頁面渲染 return render_template('admin/articleList.html',dicts=dicts)
前端利用jinja語法渲染：
<!--該內容使用了jinja模板-->
<div id="top">
{%for item in
在點選修改文章時需要知道具體是哪偏文章需要修改所以在上面用data-id將每篇文章的id儲存到設定屬性dataset裡
在js裡直接設定路由，根據相應路由程式會執行相應的py檔案下路由的函式方法：
function del(e){ console.log('刪除',e) //獲取表單設定好的data—id值 value = e.target.dataset.id //本地路由定向 location.href='/admin/delArticle/'+ value // console.log('/admin/delArticle/'+ value) // $('form1').attr('action','/admin/delArticle/'+ value) }
相應路由下的py方法：
# 此處使用動態路由的方式接收前端傳來的id，根據相應的id刪除相應的文章 @admin.route('/delArticle/<delid>',methods=['GET','POST']) def delArticle(delid): print('123456',delid) delAr=Article.query.filter(Article.id==delid).first() db.session.delete(delAr) db.session.commit() return render_template('admin/addArticle.html')
第二種ajax請求方式：
利用ajax傳遞前端請求的資料並返回資料給到前端：
js程式碼：
//被點選的標籤物件$('.authorList') $('.authorList').click(function() { //獲取當前點選物件標籤上的屬性id值 var ID = $(this).attr('id') data = {'Articleid': ID} console.log(data) $.ajax({ // ajax請求的路由地址（py檔案下的路由下有方法） url: '/admin/editArticle', // 向後端請求型別（是一個物件格式） type: 'post', // 向後端傳送請求的資料 data: data, // 請求成功後後端返回回來的資料，後端對資料json.dumps(data) success: function (res) { // 後端對資料json.dumps(data)data是一個物件型別才能dumps，所以在此要對資料進行解析 resData=JSON.parse(res) console.log(resData) //將獲取到的資料渲染到相應的標籤裡 $('#title').val(resData.title) $('#category').val(resData.category) $('#author').val(resData.author) $('#editText')[0].innerHTML=(resData.content) } }) $('#edit')[0].style.display='block ' $('#top')[0].style.display='none ' $('#top')[0].style.opacity='0 !important' })
後端py檔案下的方法接收到資料返回資料：
@admin.route('/editArticle',methods=['post','get']) def editArticle(): # 定義一個全域性共用變數id（因為下面else裡要用到） global A_id print('bianjie',len(request.form)) # 前端點選編輯時傳入的是一個id值所以長度為1，這是將所有文章內容原樣渲染到編輯頁面，得返回所有文章內容 if len(request.form)<2: A_id= request.form['Articleid'] print('獲取前端post請求資料id',request.form['Articleid']) resEdit=Article.query.filter(Article.id==int(request.form['Articleid'])).first() data={ 'title':resEdit.title, 'author':resEdit.author, 'content':resEdit.content, 'category':resEdit.category, 'files':resEdit.files } # data是一個物件型別才能dumps # print(resEdit.title) return json.dumps(data) # 否則提交回來的就是修改文章後的內容長度大於1，執行修改相應資料庫的內容 else: print('修改文章', request.form) edit=Article.query.filter(Article.id== A_id).first() edit.title=request.form['title'] edit.content = request.form['content'] edit.category = request.form['category'] edit.files = request.form['files'] edit.author = request.form['author'] edit.edit_time =datetime.now() db.session.commit() print('修改文章') # return redirect('/showList') return '完成修改'
前後端互動還有form 表單提交post或者get傳遞資訊給後端相對較簡單，在此不多加描述
哎，還是說一下：在這裡method='post' enctype="multipart/form-data"必須寫method方法可以是post也可以是get，action是表單提交到後端的具體路由，
在該路由下py執行的具體方法
<form role="form" action='/admin/addArticle' method='post' enctype="multipart/form-data"> <div class="form-group"> <label>文章標題</label> <input type="text" placeholder="請輸入文章標題" name="title" class="form-control"> </div> </form>
後端接收表單資訊：
@add_article.route('/',methods=['POST','GET']) # 新增文章 def addArticle(): return render_template('admin/form_basic.html') @add_article.route('/add',methods=['POST','GET']) def add(): # print(request.method) if request.method=='GET': print('執行到此處1') return render_template('admin/form_basic.html') else: # 獲取使用者名稱，然後再根據使用者名稱獲取使用者id # 獲取session print('執行到此處2') # 獲取表單圖片檔案的方法 img = request.files print('圖片',img) img = img['cover_img'] # print(img.filename) if img !=None : # 獲取圖片名字 img_name=img.filename # 儲存圖片到本地 img.save('./static/images/{}'.format(img_name)) cover_img = './static/images/{}'.format(img_name) else: cover_img = 'http://bpic.588ku.com/back_pic/04/54/42/0658634373900c4.jpg' # 獲取使用者賬號 username = session.get('user_name') if username != None: check = User.query.filter(User.user_name == username).first() userid = check.id print('使用者id', userid) else: username = '失心哥' check = User.query.filter(User.user_name == username).first() userid = check.id # print('出錯了，該使用者不存在') # return '出錯了，該使用者不存在' # 獲取表單提交裡面的name為title的值 title = request.form['title'] type = request.form['type'] author = request.form['author'] content = request.form['content'] times = datetime.now() # 新增文章,foreign_user=userid addInfo=Article(title=title,cover_img=cover_img,type=type,author=author,content=content,time=times,state=1,foreign_user=userid) db.session.add(addInfo) db.session.commit() return render_template('admin/form_basic.html') # return '成功增加文章'View Code