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

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

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

前端（即html界面）传值到后端

因为现在才刚刚学习所以只掌握了ajax这一种方法（路过的大佬轻喷），具体的步骤如下：

1.给文本框设定id，通过id在ajax中的data部分接收值(因为内的内容写的时候没有显示出来，所以我在中加了一个引号（偷偷））

html部分：

//设置文本框

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的框架，所以只需要稍微改一下接口就行啦（悄咪咪))

@app.route(’/test3’)

def test3:

return render_template(‘test2.html’) //返回的是test2的界面

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

如图：

注：框架使用的是layui框架