关于前后端json数据的发送与接收详解


Posted in Javascript onJuly 30, 2017

前言

最近因为笔者后台使用的是flask框架接收和前端使用的是原生的JavaScript和jQuery的ajax发送,能力有限,在此仅写下我开发项目过程中所得,分享出来供大家参考学习,下面话不多说,跟着小编来一起看看详细的介绍:

一、flask中的json数据接收

1、利用flask的request.form.get()方法

Python后台部分代码

from flask import Flask
from flask import jsonify
from flask import request
import json
...

# 登录
@app.route("/flask/login", methods=['POST'])
def login():
 data_ = request.form.get('data')
 data = json.loads(data)
 username = data['username']
 password = data['password']
 rem = False
 if data['remember']:
  rem = True
 return jsonify({"login": Login.login(username, password, rem)}) # 返回布尔值

2、 利用flask的request.get_data()方法

Python后台代码

from flask import Flask
from flask import jsonify
from flask import request
import json
...

# 登录
@app.route("/flask/login", methods=['POST'])
def login():
 data = request.get_data()
 data = json.loads(data)
 username = data['username']
 password = data['password']
 rem = False
 if data['remember']:
  rem = True
 return jsonify({"login": Login.login(username, password, rem)}) # 返回布尔值

3、利用flask的request.get_json()方法

Python后台代码

from flask import Flask
from flask import jsonify
from flask import request

...

# 登录
@app.route("/flask/login", methods=['POST'])
def login():
 data = request.get_json()
 username = data['username']
 password = data['password']
 rem = False
 if data['remember']:
  rem = True
 return jsonify({"login": Login.login(username, password, rem)}) # 返回布尔值

二、前端发送json数据

1、原生XMLHttp发送

function login() {
 var username =document.getElementById("username").value;
 var password = document.getElementById("password").value;
 var remember =document.getElementById("remember").checked;
 var xmlhttp;
 if (window.XMLHttpRequest)
 {
  // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  xmlhttp=new XMLHttpRequest();
 }
 else
 {
  // IE6, IE5 浏览器执行代码
  xmlhttp=new ActiveXObject("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="+"),这样接收还要解析一番感觉还是直接发送以下格式的好些
 var data = {
  "username": username
  "password": password
  "remember": remember
 };
 var data_json = JSON.stringify(data);
 xmlhttp.send(data_json);
}

附:json数据解析

var text = xmlhttp.responseText;
 // 通过eval() 方法将json格式的字符串转化为js对象,并进行解析获取内容
 var result = eval("("+text+")");
 if (result) {
    
  } else {
    alert("请输入正确的用户名和密码");
   }

2、ajax发送

$(document).ready(function () {
 var data = {
 "username": "adamin",
 "password": "123456789",
 "remember": true
 }
 $.ajax({
  url: "/flask/login",
  type: "POST",
  data: data,
  success: function () {
   
  }
 })
 })

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持

Javascript 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
小程序云开发初探(小结)
Oct 24 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
Js类的构建与继承案例详解
Sep 15 Javascript
jquery easyui如何实现格式化列
Jul 30 #jQuery
微信小程序对接七牛云存储的方法
Jul 30 #Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 #Javascript
Vue自定义指令详解
Jul 28 #Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 #Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 #Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 #Javascript
You might like
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
Python编程实现正则删除命令功能
2017/08/30 Python
pyqt5自定义信号实例解析
2018/01/31 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
python3 map函数和filter函数详解
2019/08/26 Python
下载官网python并安装的步骤详解
2019/10/12 Python
Python生成词云的实现代码
2020/01/14 Python
Python字符串及文本模式方法详解
2020/09/10 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
建筑行业的大学生自我评价
2013/12/08 职场文书
财产公证书样本
2014/04/04 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
万能检讨书2000字
2014/10/17 职场文书
干部个人考察材料
2014/12/24 职场文书
2015年环保局工作总结
2015/05/22 职场文书
航班延误投诉信
2015/07/02 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技