后端從數據庫獲取數據給到前端：

第一種方式：

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 dicts%}<!--<form id="form1" method='POST' enctype="multipart/form-data" action="url">--><hr/><h3 class="zuo">作者:</h3><p class="biao">{{item['author']}}</p><p class="lei">文章分類:{{item['category']}}</p><p class="shi">文章發布時間:{{item['put_date']}}</p><p class="nei">文章內容:{{item['content']}}</p><button class="authorList" id="{{item.id}}" >編輯</button><!--這里的data-id是設置的標簽數學，在點擊不同的item時獲取它的id值，下面講解在js里用到--><button data-id="{{item.id}}" οnclick="del(event)" type="submit" class="delete">刪除</button><hr style="border:1rem;border-bottom-color: black"/><!--</form>-->{% endfor %}</div>

在點擊修改文章時需要知道具體是哪偏文章需要修改所以在上面用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_idprint('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# 獲取sessionprint('運行到此處2')# 獲取表單圖片文件的方法img = request.filesprint('圖片',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.idprint('用戶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=useridaddInfo=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

?

轉載于:https://www.cnblogs.com/Dark-fire-liehuo/p/9884117.html

總結

以上是生活随笔為你收集整理的python中前后端通信方法Ajax和ORM映射（form表单提交）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。