flask框架实现前后端数据的传递

1 篇文章 0 订阅
1 篇文章 0 订阅

flask框架实现前后端数据的传递

这几天一直在基于flask框架实现一个登陆和注册界面,并且以管理员的身份对数据库中的数据实现增删改查。刚刚开始着手的时候,如何实现前后端数据的传递这个问题困扰了好久,现在已经解决,所以记录一下防止以后用到。

前端(即html界面)传值到后端

因为现在才刚刚学习所以只掌握了ajax这一种方法(路过的大佬轻喷),具体的步骤如下:
1.给文本框设定id,通过id在ajax中的data部分接收值(因为<>内的内容写的时候没有显示出来,所以我在<>中加了一个引号(偷偷))
<’!----------------------------------------前端----------------------------------------------!>
html部分:
<‘input type=“text” id=“username”>//设置文本框
ajax部分:
var data{
usr: $("#username").val(),//获取文本框中用户输入的的值
}
$.ajax{
url:’/test’,//跳转到后端的‘/route’路由
data:data,
type:‘post’,
datatype:‘json’,
success :function(result) //如果/route路由对应的函数有返回值的话
{
alert(result)
}
eorr : function(result)
{
alert(‘eorr’)
}
}

<’!----------------------------------------------后端--------------------------------------------------!>

@app.route(’/test’)
def test():
if request.method==‘post’:
request.form.get(‘usr’);//这样我们就获得了刚刚通过ajax传递过来的usrename
db=mysqldb.mysqldb();//前一个mysqldb表示我封装的一个文件,后面的mysqldb是里面的一个类
sql=(‘select * from ‘表名’ where username=’{0}’’)//查询语句
db.select(sql);执行查询
return render_template(‘test.html’)
这样我们就实现了前端界面对后端数据库的查询操作(增删改的道理相同)

后端向前端传值

实现后端向前端传值,需要把数据转化成json格式(利用一个函数),将其传递到前端,再利用刚刚的前端向后端传值的方法,通过后端返回一个html即可.

1.将数据转化为json格式
@app.route(’/test2’)
def test2:
num=[] //定义一个字典
db = mysqldb.mysqldb()
sql = str.format(“select username,password,sex,birthday,email from‘表名’”)
fc = db.select(sql)
for row in fc:
num.append({‘username’:row[0],‘password’:row[1],‘sex’:row[2],‘birthday’:row[3],‘e mail’:row[4]})//注意字典的写法,是({})
return json.dumps({‘code’:0,‘count’:10,‘msg’: “success”,‘data’:num}) //这样就返回了一个json类型的键值对

2.后端的ajax:
在这里插入图片描述
把url接口设置为刚刚的test2的路由,当做数据接口
(因为这里使用的是layui的框架,所以只需要稍微改一下接口就行啦(悄咪咪))

  1. @app.route(’/test3’)
    def test3:
    return render_template(‘test2.html’) //返回的是test2的界面

    总结:我们需要得到test2.html时,只需要输入/test3,就显示出了test2的界面,因为界面中的值已经在test2函数中通过键值对传进去了,所以我们看到的界面就是有了数据的界面啦!

如图:在这里插入图片描述

注:框架使用的是layui框架

  • 4
    点赞
  • 53
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值