python中前后端通信方法Ajax和ORM映射（form表单提交）

后端从数据库获取数据给到前端：

第一种方式：

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 '成功增加文章'