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

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

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

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

如图：

注：框架使用的是layui框架