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
转载于:https://www.cnblogs.com/hustdc/p/9892306.html
spring boot ajax post 前后端相关推荐
- (五)Debian Linux中部署Spring Boot + Vue的前后端分离项目详细过程(arm64/aarch64架构下)
专题系列往期文章目录 (一)移动端安卓手机改造成linux服务器&Linux中安装软件踩坑历险记 (二)Debian Linux系统中安装oracle JDK1.8详细过程(arm64/aar ...
- spring boot 与 iview 前后端分离架构之开发环境基于docker的部署的实现(三十六)
spring boot 与 iview 前后端分离架构之开发环境基于docker的后端的部署的实现(三十六) 公众号 基于docker的后端的部署 安装mysql数据库 创建数据库 安装redis 安 ...
- Java版知识付费源码 Spring Cloud+Spring Boot+Mybatis+uniapp+前后端分离实现知识付费平台
提供职业教育.企业培训.知识付费系统搭建服务.系统功能包含:录播课.直播课.题库.营销.公司组织架构.员工入职培训等. 提供私有化部署,免费售后,专业技术指导,支持PC.APP.H5.小程序多终端同步 ...
- 记一次Spring boot 和Vue前后端分离的入门培训
点击上方 好好学java ,选择 星标 公众号 重磅资讯.干货,第一时间送达今日推荐:2020年7月程序员工资统计,平均14357元,又跌了,扎心个人原创100W+访问量博客:点击前往,查看更多 作者 ...
- Spring Boot 和 Vue 前后端分离教程(附源码)
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料 作者 | 梁小生0101 juejin.im/post/5c622 ...
- 最细致的Spring Boot结合Vue前后端分离项目打包部署步骤(搭配Nginx)
文章目录 前言 一.环境准备 二.SpringBoot项目打jar包 1.1 使用Maven的package插件打包 1.2 上传至Linux服务器 三.Vue项目打包 1.1 修改后台请求地址 1. ...
- Spring Boot Vue Admin 前后端完全分离的权限控制模版
Spring Boot Vue Admin 简介 提供一套前后端分离的后台权限管理模版,按钮级别的权限控制. 前端 Vue 模板来自 vue-element-admin,其他功能可以根据该项目再进行拓 ...
- 保姆级的一个基于spring boot开发的前后端分离商城教程
前言 推荐一个基于spring boot开发前后端分离商城,有完整的代码笔记和视频教程,希望对正在找项目练手的同学有所帮助 本文资料文档领取(在文末) 一.项目背景 5中常见的电商模式 B2B .B2 ...
- Spring Boot + Spring-Security实现前后端分离双重身份认证初学者指南(手机号密码JWT + 短信验证码)
折(mo)腾(yu)了好几天,终于把双重身份认证实现了.(账号密码jwt+短信验证码) 看了很多视频,照葫芦画瓢敲了两三次,遇到各种各样的bug,比如循环依赖(通过@PostConstructor+s ...
最新文章
- LeetCode 简要日记 455 104
- golang 日志输出
- 第三十八讲:tapestry Ajax 关联下拉选框(select)组件
- 【Nginx】 server 配置记录
- android动画延迟执行,Android 过渡动画框架
- OC系列foundation Kit基础-NSString
- SilverLight开发系列第1步:搭建开发环境
- Spring StringUtils类中几个有用的字符串处理方法
- 华为服务器维修期,拆看一台1U华为服务器RH1288 V2-8S
- 矩阵的迹(Trace)
- Android 时间API
- 执行fadein追加css,基于CSS3完成淡入(fadeIn)淡出(fadeOut)结果
- pytorch快速上手-使用自动标注软件Openlabeling和yolov5快速完成目标检测
- 设置微信小程序支持npm(解决微信小程序npm构建时提示“没有找到可以构建的NPM包,请确认需要参与构建的npm都在miniprogramroot目录内,或配置project...”错误)的方法
- php遍历数组查询数据库,php如何遍历数据库查询数组
- 极客时间左耳听风-高效学习
- 利用kali hydra 暴力破解Windows7(hydra的基本用法)会继续更新
- 音乐app、app原型、音乐原型、云音乐、听歌、电台、本地音乐、点赞、收藏、歌单广场、动态、社区、评论、歌词、歌手、主播、视频、云村、下载、翻唱、歌曲播放、订阅、频道、引导页、登录注册、axure原型
- 今天给大家分享用scratch制作最难通关管道小游戏!
- python画车辆轨迹图_如何利用 Python 绘制酷炫的 车辆轨迹 — 速度时空图?三维数据用二维图像呈现...
热门文章
- 运维面试必问的中间件高频面试题(2021年最新版)
- x64下隐藏可执行内存
- 理解C# 8.0中的null!
- pbmplus-图像文件格式转换包与PBM/PGM/PPM 格式图像文件
- P1640 [SCOI2010]连续攻击游戏 (二分图)
- SEO互点工具到底会对网站造成怎样的危害
- c语言编程求无向图的连通分支,无向图的连通分支
- Linux 常用知识点(一):.sh 文件的创建与打开
- html5播放音频流,html5 – 使用Audio API播放音频流
- STM32Keil工程模板创建(详细配图)