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. BeagleBone Black板第四课:简单LED控制实验

    BBB板第四课:简单LED控制实验 学习BBB板的终于目的是想像单片机一样做控制,但控制思路全然不一样(Linux下控制硬件设备实质就是对相关设备虚拟文件的读写).研究了几天头都大了还是没有进展,网上 ...

  2. 【共享单车】—— React后台管理系统开发手记:权限设置和菜单调整(未完)

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  3. 系统封装 如何修改别人的PE为己所用

    我们以修改"我心如水 WIN7PE_16.99.1 维护版.ISO"为例,整个ISO的核心文件就是这个BOOT.WIM,我们先把他提取出来. 然后用在本教程第一章学到的东西,用AI ...

  4. Python学习笔记(二)网络编程的简单示例

    Python中的网络编程比C语言中要简洁很多,毕竟封装了大量的细节. 所以这里不再介绍网络编程的基本知识.而且我认为,从Python学习网络编程不是一个明智的选择.   简单的TCP连接 服务器代码如 ...

  5. 基于JWT的Token开发案例

    代码地址如下:http://www.demodashi.com/demo/12531.html 0.准备工作 0-1运行环境 jdk1.8 maven 一个能支持以上两者的代码编辑器,作者使用的是ID ...

  6. NSNotification的几点说明

    1.NSNotification消息的同步性 ①NSNotification使用的是同步操作.即如果你在程序中的A位置post了一个NSNotification,在B位置注册了一个observer,通 ...

  7. C#IAsyncResult异步回调函数的解释

    问题:IAsyncResult ar 是如何通过ar.AsyncState强制转换成TCPClientState类型 答:实例中使用的方法如下 我给IAsyncResult ar传入了TCPClien ...

  8. python 读写数据

    开源标准数据集 —— mnist(手写字符识别) 下载地址:mnist.pkl.gz 1. 使用 python 读取和解析 mnist.pkl.gz import pickle import gzip ...

  9. Android使用ImageView显示网络图片

    本案例使用ImageView 简单的实现了网络图片的调用.当中注意事项.由于用到了网络,这里採用了HttpClient方法訪问网络联接,关于怎样使用,可參照文章 Android中使用HttpClien ...

  10. hbase的数据模型

    hbase类似bigTable是一个分布式的数据库,它是一个稀疏的,长期存储的,多维的,排序的映射表,这张表的索引是行关键字,列关键字,时间戳.hbase中的数据都是字符串,没有类型.         ...