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 前后端的更多相关文章

  1. 《Spring Boot 入门及前后端分离项目实践》系列介绍

    课程计划 课程地址点这里 本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 个部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 项目实践开发 ...

  2. 《Spring Boot 入门及前后端分离项目实践》目录

    开篇词:SpringBoot入门及前后端分离项目实践导读 第02课:快速认识 Spring Boot 技术栈 第03课:开发环境搭建 第04课:快速构建 Spring Boot 应用 第05课:Spr ...

  3. 基于Spring Boot架构的前后端完全分离项目API路径问题

    最近的一个项目采用前后端完全分离的架构,前端组件:vue + vue-router + vuex + element-ui + axios,后端组件:Spring Boot + MyBatis.之所以 ...

  4. 实战!spring Boot security+JWT 前后端分离架构认证登录!

    大家好,我是不才陈某~ 认证.授权是实战项目中必不可少的部分,而Spring Security则将作为首选安全组件,因此陈某新开了 <Spring Security 进阶> 这个专栏,写一 ...

  5. Spring Cloud实战 | 最八篇:Spring Cloud +Spring Security OAuth2+ Axios前后端分离模式下无感刷新实现JWT续期

    一. 前言 记得上一篇Spring Cloud的文章关于如何使JWT失效进行了理论结合代码实践的说明,想当然的以为那篇会是基于Spring Cloud统一认证架构系列的最终篇.但关于JWT另外还有一个 ...

  6. spring boot + spring security +JWT令牌 +前后端分离--- 心得

    1.前言 观看这篇随笔需要有spring security基础. 心得: 1.生成token 的变化数据是用户名和权限拼接的字符串 ,其他的固定 2.生成的token是将登录通过的用户的权限拼接的字符 ...

  7. 基于Spring Boot+Spring Security+JWT+Vue前后端分离的开源项目

    一.前言 最近整合Spring Boot+Spring Security+JWT+Vue 完成了一套前后端分离的基础项目,这里把它开源出来分享给有需要的小伙伴们 功能很简单,单点登录,前后端动态权限配 ...

  8. 玩转spring boot——ajax跨域

    前言  java语言在多数时,会作为一个后端语言,为前端的php,node.js等提供API接口.前端通过ajax请求去调用java的API服务.今天以node.js为例,介绍两种跨域方式:Cross ...

  9. Spring Boot 系列教程9-swagger-前后端分离后的标准

    前后端分离的必要 现在的趋势发展,需要把前后端开发和部署做到真正的分离 做前端的谁也不想用Maven或者Gradle作为构建工具 做后端的谁也不想要用Grunt或者Gulp作为构建工具 前后端需要通过 ...

随机推荐

  1. log4j教程 1、概述

    log4j是一个用Java编写的可靠,快速和灵活的日志框架(API),它在Apache软件许可下发布.    Log4j已经被移植到了C,C++,C#,Perl,Python和Ruby等语言中.   ...

  2. Keepalived高可用集群应用

    Keepalived高可用集群应用 1.keepalived服务说明 1.1.keepalived介绍 Keepalived是一个用C语言编写的路由软件.该项目的主要目标是为Linux系统和基于Lin ...

  3. Elasticsearch教程(二),IK分词器安装

    elasticsearch-analysis-ik  是一款中文的分词插件,支持自定义词库,也有默认的词库. 开始安装. 1.下载 下载地址为:https://github.com/medcl/ela ...

  4. running android lint has encountered a

    近期写学习android编程的的时候,每次保存.java文件的时候,总会跳出例如以下错误 这个错误不是属于程序错误,把它关掉对于编程没有不论什么影响,但每次见到这个就是不爽,希望大神可以解决一下,谢谢 ...

  5. iOS 通用button 上图下字

    UIButton *first = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, kHeight(80), kHeight(80))]; [firs ...

  6. Oracle 左外连接的一些測试

    为了更加深入左外连接,我们做一些測试,外连接的写法有几种形式,我们能够通过10053跟踪到终于SQL转换的形式. --初始化数据 create table A (   id number,   age ...

  7. Linux 各个子系统以及监控、测试、优化这些子系统所用到的工具

    监控 测试: 3.优化

  8. 自己定义View时,用到Paint Canvas的一些温故,讲讲平时一些效果是怎么画的(基础篇 一)

    转载请注明出处王亟亟的大牛之路 之前也有一个相似于画板的操作,可是不够具体,这边先补上链接.有兴趣的小伙伴能够看看http://blog.csdn.net/ddwhan0123/article/det ...

  9. 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 ...

  10. Python内置函数之sorted()

    sorted(iterable,*,key=None,reverse=False) 对可迭代对象进行排序,默认ASCII进行排序. 例子: sorted(iterable,*,key=None,rev ...