spring boot ajax post 前后端
1 传输的数据格式是json
1.1 前端ajax
json的所有的key都必须是双引号引用的,并且最外层也要用双引号引用。例如
"{"a":b, "b":c,}",因为一般情况下js对象不是这样的,js对象{a:b, b:c},是没有双引号引用的。因此要用JSON.stringify()来进行一个转换。
否则,该数据不会以json类型传输,而以x-www-form-urlencoded类型的数据传输。
1.2 后端controller
@RequestMapping中要用consumes="application/json",在取参数时要用@RequestBody。
2 传输json的例子
2.1 前端ajax
function submitFormData() {
var jsonVar = JSON.stringify($('form').serializeJSON()); $.ajax({
//几个参数需要注意一下
type: "POST",
dataType: "json",
contentType: "application/json",
url: "/yunapp/task" ,
data: jsonVar,
success: function (result) {
console.log(result);//打印服务端返回的数据(调试用)
if (result.resultCode == 200) {
alert("SUCCESS");
}
;
},
error : function() {
alert("异常!");
}
});
}
2.2 后端controller
@ResponseBody
@RequestMapping(value = "/task",
method = RequestMethod.POST,
consumes="application/json")
void handleTask(@RequestBody String jsonParamStr) {
if (jsonParamStr == null) {
return;
}
}
3 关于$.ajax的返回值
success: function (result) {
},
error: function(jqXHR, textStatus, errorThrown) {
}
如果返回的是json的话,那么result就是返回的json值。
4 ajax的本质
用JavaScript写一个完整的AJAX代码并不复杂,但是需要注意:AJAX请求是异步执行的,也就是说,要通过回调函数获得响应。
在现代浏览器上写AJAX主要依靠XMLHttpRequest
对象:
use strict';
function success(text) {
var textarea = document.getElementById('test-response-text');
textarea.value = text;
}
function fail(code) {
var textarea = document.getElementById('test-response-text');
textarea.value = 'Error code: ' + code;
}
var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象
request.onreadystatechange = function () { // 状态发生变化时,函数被回调
if (request.readyState === 4) { // 成功完成
// 判断响应结果:
if (request.status === 200) {
// 成功,通过responseText拿到响应的文本:
return success(request.responseText);
} else {
// 失败,根据响应码判断失败原因:
return fail(request.status);
}
} else {
// HTTP请求还在继续...
}
}
// 发送请求:
request.open('GET', '/api/categories');
request.send();
alert('请求已发送,请等待响应...');
参考:
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6000
spring boot ajax post 前后端的更多相关文章
- 《Spring Boot 入门及前后端分离项目实践》系列介绍
课程计划 课程地址点这里 本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 个部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 项目实践开发 ...
- 《Spring Boot 入门及前后端分离项目实践》目录
开篇词:SpringBoot入门及前后端分离项目实践导读 第02课:快速认识 Spring Boot 技术栈 第03课:开发环境搭建 第04课:快速构建 Spring Boot 应用 第05课:Spr ...
- 基于Spring Boot架构的前后端完全分离项目API路径问题
最近的一个项目采用前后端完全分离的架构,前端组件:vue + vue-router + vuex + element-ui + axios,后端组件:Spring Boot + MyBatis.之所以 ...
- 实战!spring Boot security+JWT 前后端分离架构认证登录!
大家好,我是不才陈某~ 认证.授权是实战项目中必不可少的部分,而Spring Security则将作为首选安全组件,因此陈某新开了 <Spring Security 进阶> 这个专栏,写一 ...
- Spring Cloud实战 | 最八篇:Spring Cloud +Spring Security OAuth2+ Axios前后端分离模式下无感刷新实现JWT续期
一. 前言 记得上一篇Spring Cloud的文章关于如何使JWT失效进行了理论结合代码实践的说明,想当然的以为那篇会是基于Spring Cloud统一认证架构系列的最终篇.但关于JWT另外还有一个 ...
- spring boot + spring security +JWT令牌 +前后端分离--- 心得
1.前言 观看这篇随笔需要有spring security基础. 心得: 1.生成token 的变化数据是用户名和权限拼接的字符串 ,其他的固定 2.生成的token是将登录通过的用户的权限拼接的字符 ...
- 基于Spring Boot+Spring Security+JWT+Vue前后端分离的开源项目
一.前言 最近整合Spring Boot+Spring Security+JWT+Vue 完成了一套前后端分离的基础项目,这里把它开源出来分享给有需要的小伙伴们 功能很简单,单点登录,前后端动态权限配 ...
- 玩转spring boot——ajax跨域
前言 java语言在多数时,会作为一个后端语言,为前端的php,node.js等提供API接口.前端通过ajax请求去调用java的API服务.今天以node.js为例,介绍两种跨域方式:Cross ...
- Spring Boot 系列教程9-swagger-前后端分离后的标准
前后端分离的必要 现在的趋势发展,需要把前后端开发和部署做到真正的分离 做前端的谁也不想用Maven或者Gradle作为构建工具 做后端的谁也不想要用Grunt或者Gulp作为构建工具 前后端需要通过 ...
随机推荐
- log4j教程 1、概述
log4j是一个用Java编写的可靠,快速和灵活的日志框架(API),它在Apache软件许可下发布. Log4j已经被移植到了C,C++,C#,Perl,Python和Ruby等语言中. ...
- Keepalived高可用集群应用
Keepalived高可用集群应用 1.keepalived服务说明 1.1.keepalived介绍 Keepalived是一个用C语言编写的路由软件.该项目的主要目标是为Linux系统和基于Lin ...
- Elasticsearch教程(二),IK分词器安装
elasticsearch-analysis-ik 是一款中文的分词插件,支持自定义词库,也有默认的词库. 开始安装. 1.下载 下载地址为:https://github.com/medcl/ela ...
- running android lint has encountered a
近期写学习android编程的的时候,每次保存.java文件的时候,总会跳出例如以下错误 这个错误不是属于程序错误,把它关掉对于编程没有不论什么影响,但每次见到这个就是不爽,希望大神可以解决一下,谢谢 ...
- iOS 通用button 上图下字
UIButton *first = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, kHeight(80), kHeight(80))]; [firs ...
- Oracle 左外连接的一些測试
为了更加深入左外连接,我们做一些測试,外连接的写法有几种形式,我们能够通过10053跟踪到终于SQL转换的形式. --初始化数据 create table A ( id number, age ...
- Linux 各个子系统以及监控、测试、优化这些子系统所用到的工具
监控 测试: 3.优化
- 自己定义View时,用到Paint Canvas的一些温故,讲讲平时一些效果是怎么画的(基础篇 一)
转载请注明出处王亟亟的大牛之路 之前也有一个相似于画板的操作,可是不够具体,这边先补上链接.有兴趣的小伙伴能够看看http://blog.csdn.net/ddwhan0123/article/det ...
- es6/es7 对象数组的合并拷贝
方法一: let o1 = { a: 1, b: 2, c: 3 }; let o2 = {...o1, d: 4}; // o2 = { a: 1, b: 2, c: 3, d: 4 } let a ...
- Python内置函数之sorted()
sorted(iterable,*,key=None,reverse=False) 对可迭代对象进行排序,默认ASCII进行排序. 例子: sorted(iterable,*,key=None,rev ...