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

第一种方式:

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[]['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}}" onclick="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('',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')[].innerHTML=(resData.content)
}
})
$('#edit')[].style.display='block '
$('#top')[].style.display='none '
$('#top')[].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)<: 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=,foreign_user=userid)
db.session.add(addInfo)
db.session.commit()
return render_template('admin/form_basic.html')
# return '成功增加文章'

python中前后端通信方法Ajax和ORM映射(form表单提交)的更多相关文章

  1. ajax传递数组、form表单提交对象数组

    在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题.不过,在前几天的开发 ...

  2. form表单提交与ajax消息传递

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

  3. Checkbox框全选操作,form表单提交与jquery ajax提交两种处理方式

    //1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...

  4. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  5. Form表单提交,Ajax请求,$http请求的区别

    做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...

  6. Atitit vue.js 把ajax数据 绑定到form表单

    Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...

  7. jqPaginator分页(ajax用法和form表单提交用法)

    一般使用方法 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...

  8. javascprit form表单提交前验证以及ajax返回json

    1.今天要做一个手机验证码验证的功能.需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证.思路很简单,不过做的过程还是学到不少的东西. 1.ajax请求后 ...

  9. form表单提交转为ajax方式提交

    <form action="xxx" method="get"> //action的值是请求的url地址 <div class="f ...

随机推荐

  1. 【洛谷P2215】上升序列

    题目大意:给定一个长度为 N 的序列,有 M 个询问,每个询问要求输出长度为 L 的上升子序列,若不存在,输出 impossible,若存在,输出下标字典序最小的一个. 题解:考虑到若 L 大于整个序 ...

  2. C#面向对象中类的继承和扫描顺序和接口

    1.   类的分类:普通基类.抽象基类(abstract  class)1.   类的扫描顺序:a.先近后远 b.(向上扫描)以谁身份声明的变量就在谁身上开始扫描, 2.   扫描的特殊情况:普通基类 ...

  3. 记录替换django的user模型出现的异常InconsistentMigrationHistory

    django.db.migrations.exceptions.InconsistentMigrationHistory: Migration admin.0001_initial is applie ...

  4. 神经网络中w,b参数的作用(为何需要偏置b的解释)

    http://blog.csdn.net/xwd18280820053/article/details/70681750 可视图讲解神经元w,b参数的作用 在我们接触神经网络过程中,很容易看到就是这样 ...

  5. java8 List<对象> 转 Set、Map(高级)

    实体类 public class Student { private int id; private String name; private String score; private int cl ...

  6. 开发问题及解决--java.lang.IllegalStateException: Circular dependencies cannot exist in RelativeLayout

    <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android=" ...

  7. 使用postman测试hystrix

    当在浏览器发送多次请求检测hystrix的作用时,我们可以使用postman来自动发送多次请求: 1.将链接保存到一个collection中 2.点击runner 3.设定运行次数

  8. 跨域、curl、snoopy、file_get_contents()

    定义:可以称为”信息采集/模拟登录”技术,可以实现对某个地址做请求,同时按照要求传递get或post参数. curl本身是php的一个扩展,同时也是一个利用URL语法规定来传输文件和数据的工具,支持很 ...

  9. npmrc npm配置文件

    一.全局 这个文件在全局会放在/users/${yourname}/.npmrc 里面最重要的是registry,npm的源 二.项目 项目里面如果和package.json同级存放了这个.npmrc ...

  10. python 变量 if

    #########################总结###################### 1. 初识python python是一门弱类型的解释型高级编程语言 解释器: CPython 官方 ...