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

第一种方式:

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表单提交)相关推荐

  1. from提交ajax,form表单提交与ajax消息传递

    form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...

  2. 表单ajax提交插件,jQuery Form 表单提交插件-----ajaxSubmit() 的应用

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.ajaxSubmit() 介绍 立即通过AJA ...

  3. php ajax form表单提交,Ajax方法实现Form表单提交的方法

    这次给大家带来Ajax方法实现Form表单提交的方法,Ajax方法实现Form表单提交的注意事项有哪些,下面就是实战案例,一起来看一下. 写在前面的话 在使用form表单的时候,一旦点击提交触发sub ...

  4. java ajax提交form表单提交_form表单AJAX提交(四种方法)

    一.AJAX的 form表单提交 1.第一种: 序列化提交$('#form').serialize() 前台: $.ajax({ url: "", type: "post ...

  5. form和ajax同时提交吗,form表单提交与ajax消息传递

    form表单提交与ajax消息传递 1.前后端传输数据编码格式contentType: urlencoded 对应的数据格式:name=xxx&password=666 后端获取数据:requ ...

  6. form 表单提交时用ajax异步请求导致ajax请求结果无法接收问题

    1.背景描述,有个公司内部用的小系统,不想大动干戈用太多前端框架,就用HTML5写了个登陆页面,刚开始想着用form表单提交登陆账户信息.后来因为前后端分离,并且统一用ajax调用后台服务交互数据,因 ...

  7. 将form表单提交文件修改为ajax提交

    好久没有记录工作中的出现的问题了,不过最近客户提出了新的需求,正好弥补了一下我的短板,学到了新的知识. 周一接到客户电话,要求完善上周写的某个功能--就是同时上传多个图片,并通过接口程序传到第三方系统 ...

  8. ajax 模拟表单提交,Ajax模拟Form表单提交,含多种数据上传

    ---恢复内容开始--- Ajax提交表单.使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取) 有时候前台的数据提交到后台,不想使用form表单上传,希 ...

  9. form表单提交和ajax表单提交

    相信大家在做itoo的时候都用过ajax异步提交数据,好处自然不言而喻,数据提交页面不会闪屏;页面局部更新速度快;网络带宽占用低.而表单提交则整个页面重绘.如果表单提交后跳转到另一个页面获取数据这种情 ...

最新文章

  1. 关于VC编译器错误 Error C2558
  2. Informatica PowerCenter使用介绍-转载
  3. Python中的正则表达式(特征匹配)
  4. Soa和Wcf(转)
  5. Java并发编程实战~生产者-消费者模式
  6. android安全补丁卸载,这种安全更新能不卸载就不卸载
  7. C语言课后习题(61)
  8. 【nodejs原理源码赏析(5)】net模块与通讯的实现
  9. bzoj5092: [Lydsy1711月赛]分割序列
  10. 弹力球C语言课程设计,弹力球游戏c语言代码
  11. 八、Identity Card
  12. Window下Ribbit MQ安装
  13. uniapp实现加载图片失败显示占位图
  14. 莫斯卡托葡萄酒的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
  15. 高校计算机专业实践教学改革研究,民族高校计算机专业实践教学改革
  16. vue canvas typescript 绘制时间标尺
  17. world2010 插入参考文献时有跳行的问题
  18. 使用Intel XED检测Linux内核是否被rootkit控制
  19. 小编带你简单了解一下加密技术原理:AES加密标准
  20. 饿了吗 ui 行拖拽处理

热门文章

  1. c语言的数据类型复数型,C语言数据类型
  2. android手机用户,[信息图]Android手机用户如何使用自己的设备?
  3. 2020idea插件怎么同步_没有用过这些插件,别说你在用vscode
  4. linux java 环境配置_linux下java开发环境配置
  5. linux进程如何挂起自己,Linux Server HTTP进程每天挂起服务器
  6. c++ 标准库类型string
  7. 2018.9.15,Matlab实验三:字符串、单元数组和结构体
  8. c语言 连接哨兵 redis6,Redis哨兵--缓存服务器
  9. 织梦重置mysql数据库密码忘记_织梦cms管理员密码忘记了怎么重置找回?
  10. ueditor工具栏弹出html,UEditor工具栏上自定义按钮、图标、事件、窗口页面