关于前后端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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 Javascript
vue中监听返回键问题
Aug 28 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
原生js+css实现tab切换功能
Sep 17 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
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
Python程序语言快速上手教程
2012/07/18 Python
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
python逆向入门教程
2018/01/15 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
Python网页解析器使用实例详解
2020/05/30 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
python 如何引入协程和原理分析
2020/11/30 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
机械电子工程毕业生自荐信
2013/11/23 职场文书
秋季运动会稿件
2014/01/30 职场文书
质量月活动总结
2014/08/26 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
在CSS中使用when/else的方法
2022/01/18 HTML / CSS