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作为构建工具 前后端需要通过 ...
随机推荐
- BeagleBone Black板第四课:简单LED控制实验
BBB板第四课:简单LED控制实验 学习BBB板的终于目的是想像单片机一样做控制,但控制思路全然不一样(Linux下控制硬件设备实质就是对相关设备虚拟文件的读写).研究了几天头都大了还是没有进展,网上 ...
- 【共享单车】—— React后台管理系统开发手记:权限设置和菜单调整(未完)
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 系统封装 如何修改别人的PE为己所用
我们以修改"我心如水 WIN7PE_16.99.1 维护版.ISO"为例,整个ISO的核心文件就是这个BOOT.WIM,我们先把他提取出来. 然后用在本教程第一章学到的东西,用AI ...
- Python学习笔记(二)网络编程的简单示例
Python中的网络编程比C语言中要简洁很多,毕竟封装了大量的细节. 所以这里不再介绍网络编程的基本知识.而且我认为,从Python学习网络编程不是一个明智的选择. 简单的TCP连接 服务器代码如 ...
- 基于JWT的Token开发案例
代码地址如下:http://www.demodashi.com/demo/12531.html 0.准备工作 0-1运行环境 jdk1.8 maven 一个能支持以上两者的代码编辑器,作者使用的是ID ...
- NSNotification的几点说明
1.NSNotification消息的同步性 ①NSNotification使用的是同步操作.即如果你在程序中的A位置post了一个NSNotification,在B位置注册了一个observer,通 ...
- C#IAsyncResult异步回调函数的解释
问题:IAsyncResult ar 是如何通过ar.AsyncState强制转换成TCPClientState类型 答:实例中使用的方法如下 我给IAsyncResult ar传入了TCPClien ...
- python 读写数据
开源标准数据集 —— mnist(手写字符识别) 下载地址:mnist.pkl.gz 1. 使用 python 读取和解析 mnist.pkl.gz import pickle import gzip ...
- Android使用ImageView显示网络图片
本案例使用ImageView 简单的实现了网络图片的调用.当中注意事项.由于用到了网络,这里採用了HttpClient方法訪问网络联接,关于怎样使用,可參照文章 Android中使用HttpClien ...
- hbase的数据模型
hbase类似bigTable是一个分布式的数据库,它是一个稀疏的,长期存储的,多维的,排序的映射表,这张表的索引是行关键字,列关键字,时间戳.hbase中的数据都是字符串,没有类型. ...