前后端分离模式下前端与后端数据交互

下面举的例子就是使用jQuery Ajax和Python Flask进行前后端交互时，前端提交表单数据到后端，后端返回JSON数据给前端。

前端GET提交表单数据：

# GET请求var data = {"name": "test","test": "test",
};
$.ajax({type: 'GET',url: /your/url/,data: data, # 最终会被转化为查询字符串跟在url后面： /your/url/?name=test&age=1dataType: 'json', success: function(data) { # 这里的data就是json格式的数据},error: function(xhr, type) {}
});

请求里面的dataType指的是希望服务端能返回的数据格式，还可以是null, xml, script, json

后端接受GET请求：

name = request.args.get('name', ' ')

前端POST提交表单信息：

data = $('#form1').serialize();
# 这是页面有表单的情况下，使用jQuery的方法直接将整个表单的信息储存到data里面$.ajax({type: 'POST',url: /your/url/,data: data,dataType: 'json',success: function(data) {},error: function(xhr, type) {}
});

后端接受POST表单请求：

name = request.form.get('name', '')

前端POST提交JSON数据：
如果是JSON数据，就需要添加contentType参数，告诉后端传递过来的格式是JSON

var data = {“name”: "test",...
}
$.ajax({type: 'POST',url: /your/url/,data: JSON.stringify(data), # 转化为字符串contentType: 'application/json; charset=UTF-8',dataType: 'json', success: function(data) {},error: function(xhr, type) {}
});

这里前端需要将JSON格式data转换为字符串，并告知了后端格式，后端需要再将字符串转换为JSON格式。

后端接受POST JSON请求：

data = request.get_json()

前后端分离模式下前端与后端数据交互相关推荐

前后端分离模式下的权限设计方案
前后端分离模式下,所有的交互场景都变成了数据,传统业务系统中的权限控制方案在前端已经不再适用,因此引发了我对权限的重新思考与设计. 权限控制到底控制的是什么? 在理解权限控制之前,需要明白两个概念:资 ...
【sprintboot+vue】前后端分离模式下的登录验证码验证
[项目背景] 考虑登录时的验证安全,需要添加验证码验证,纯前端实现的验证码其实没有真正意义上做到安全验证的要求,简单一个网页爬虫就能获取到前端生成的验证码,所以应该由后台生成验证码,并由后台完成校验过 ...
vue后端必须接口吗_前后端分离模式，后端说开发完才能给接口文档，合理吗
背景: 汇总了下老王在其他平台的原创回复,欢迎关注老王原创公众号[软件老王],关注不迷路. 一.后端开发完接口才给出接口文档,合理吗? 本人所在的项目组做项目过程中,后端不会先给出接口文档,而是要等他 ...
前后端分离开发下的权限管控：SpringSecurity 框架
首先在了解前后端分离模式下使用SpringSecurity框架之前,我们需要先了解token和jwt(Json Web Token)技术 token 和 session 的区别? 由于http协议是无 ...
浅论前后端分离模式：低代码强势推动开发效率提升
编者按:本文介绍前后端分离,以及低代码如何采用前后端分离等先进技术为软件开发赋能提效,提高用户开发体验. 如何理解分离前后端? 前后端分离,其实就是将一个单体应用拆分成两个独立的应用,只通过简单的AP ...
Spring Boot + Vue 前后端分离开发，前端网络请求封装与配置
前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个 ...
从零开始搭建仿抖音短视频App-前后端开发模式，前端框架的选择、前端项目搭建
目录前后端开发模式传统JavaWeb开发模式前后端分离模式编辑前端框架的选择-UniApp介绍内网互通原则运行到iphone与Android 前后端开发模式传统JavaWeb开发模式 ...
《浅谈架构之路：前后端分离模式》 - 山人行 - 博客园
前言:分离模式对前后端分离研究了一段时间,恰逢公司有一个大项目决定尝试使用前后端分离模式进行,便参与其中.该项目从2016年初立项至今,平平稳稳得度过,但也涌现出越来越多的问题,绝对不是说前后端分离 ...
《浅谈架构之路：前后端分离模式》
前言:分离模式对前后端分离研究了一段时间,恰逢公司有一个大项目决定尝试使用前后端分离模式进行,便参与其中.该项目从2016年初立项至今,平平稳稳得度过,但也涌现出越来越多的问题,绝对不是说前后端分离 ...

前后端分离模式下前端与后端数据交互

前后端分离模式下前端与后端数据交互相关推荐

最新文章

热门文章