关于前后端json数据的发送与接收详解
前言
最近因为笔者后台使用的是flask框架接收和前端使用的是原生的JavaScript和jQuery的ajax发送，能力有限，在此仅写下我开发项目过程中所得，分享出来供大家参考学习，下面话不多说，跟着小编来一起看看详细的介绍：
一、flask中的json数据接收
1、利用flask的request.form.get()方法
Python后台部分代码
fromflaskimportFlask
fromflaskimportjsonify
fromflaskimportrequest
importjson
...
#登录
@app.route("/flask/login",methods=['POST'])
deflogin():
data_=request.form.get('data')
data=json.loads(data)
username=data['username']
password=data['password']
rem=False
ifdata['remember']:
rem=True
returnjsonify({"login":Login.login(username,password,rem)})#返回布尔值
2、利用flask的request.get_data()方法
Python后台代码
fromflaskimportFlask
fromflaskimportjsonify
fromflaskimportrequest
importjson
...
#登录
@app.route("/flask/login",methods=['POST'])
deflogin():
data=request.get_data()
data=json.loads(data)
username=data['username']
password=data['password']
rem=False
ifdata['remember']:
rem=True
returnjsonify({"login":Login.login(username,password,rem)})#返回布尔值
3、利用flask的request.get_json()方法
Python后台代码
fromflaskimportFlask
fromflaskimportjsonify
fromflaskimportrequest
...
#登录
@app.route("/flask/login",methods=['POST'])
deflogin():
data=request.get_json()
username=data['username']
password=data['password']
rem=False
ifdata['remember']:
rem=True
returnjsonify({"login":Login.login(username,password,rem)})#返回布尔值
二、前端发送json数据
1、原生XMLHttp发送
functionlogin(){
varusername=document.getElementById("username").value;
varpassword=document.getElementById("password").value;
varremember=document.getElementById("remember").checked;
varxmlhttp;
if(window.XMLHttpRequest)
{
//IE7+,Firefox,Chrome,Opera,Safari浏览器执行代码
xmlhttp=newXMLHttpRequest();
}
else
{
//IE6,IE5浏览器执行代码
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState===4&&xmlhttp.status===200)
{
...
}
};
xmlhttp.open("POST","/flask/login",true);
xmlhttp.setRequestHeader("Content-type","application/json");
//后面这两部很重要，我看网上很多都是使用xmlhttp.send("username="+username+"&password="+"),这样接收还要解析一番感觉还是直接发送以下格式的好些
vardata={
"username":username
"password":password
"remember":remember
};
vardata_json=JSON.stringify(data);
xmlhttp.send(data_json);
}
附：json数据解析
vartext=xmlhttp.responseText;
//通过eval()方法将json格式的字符串转化为js对象，并进行解析获取内容
varresult=eval("("+text+")");
if(result){
}else{
alert("请输入正确的用户名和密码");
}
2、ajax发送
$(document).ready(function(){
vardata={
"username":"adamin",
"password":"123456789",
"remember":true
}
$.ajax({
url:"/flask/login",
type:"POST",
data:data,
success:function(){
}
})
})
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持