Ajax和SpringBoot实现JSON的传输与接收

无论是前后端分离的项目还是不分离的项目，在进行数据交互的时候我们可以将数据封装成XML、JSON等格式进行数据的交互；使用开发项目中最为常见的方式将数据封装成JSON格式传输到后台，前端分别使用axios、Ajax进行JSON 数据的传送，后端使用Spring Boot进行接收，并通过几种常用的注解实现JSON数据的接收。
- 使用前我们必须要理解什么是JSON对象？什么是JSON字符串？

//首先定义一个JSON对象1、使用Javascript的方式定义var jsonObj = { name : 'zhangsan',password:'123456'} //这里定义的对象名要和实体中属性名一致，不然后台接收不到2、使用vue 定义var jsonObj = {name: '',password: ''}jsonObj.name = this.name;jsonObj.password = this.password;
//定义JSON字符串var jsonObj = {"name":"zhangsan","password":123456}    //相比已经很明显了，JSON对象的属性名不用打引号，且属性名与实体属性名一致（尽量）//了解了JSON对象之后，JavaScript提供了两个方法1、JSON.parse() //将一个JSON字符串转换JavaScript对象2、JSON.stringify() //将javaScript的值转换成JSON字符串//例如console.log(JSON.stringify(jsonObj))  {"name":"zhangsan","password":123456}

使用AJax的传送JSON字符串

//ajax 使用异步刷新的原理，只针对页面子模块请求进行刷新，不影响整个页面，提升了与用户的交互性。
//基本语法
1、Jquery --Ajaxvar jsonObj = {"name":"zhangsan","password":123456};
$.ajax({url:"/login",method:"POST",dataType:"json",data:JSON.stringify(jsonObj),contentType:"application/json",success:function(res){//逻辑代码},error:function(res){//逻辑代码}
})

使用axios传送JSON对象

var jsonObj = {name:'',password:''}
jsonObj.name = this.name;
jsonObj.password = this.password;
axios({url:"/login",method:"POST",contentType:"aplication/json",dataType:"json",data:JSON.stringify(jsonObj),
}).then(res => {//逻辑代码
})

后端接收参数

//1、@RequestParam
//2、@RequestBody
@Controller
public class LoginController {@PostMapping("/login")public void login(@RequestParam("username") String username,@RequestParam("password") String password){System.err.println(username);System.err.println(password);}//或者
@Controller
public class LoginController {@PostMapping("/login")public void login(@RequestBody Map<String,Object> map){System.err.println(map.get("username"));System.err.println(map.get("password"));}  //或者
@Controller
public class LoginController {@PostMapping("/login")public void login(@RequestBody User user){System.err.println(user);
}
}

Ajax和SpringBoot实现JSON的传输与接收相关推荐

springboot参数转换Json格式化问题
springboot参数转换Json格式化问题比如:在分布式场景下,数据库id都是采用雪花算法生成,那么在传输给前端的时候就会产生精度丢失的问题,前端并没有Long类型这一说法. 解决方案我们都知 ...
锋利的JQuery：Ajax方法获取后端Json数据（Object、List、Map）并遍历
一.准备工作 1.1 建立SpringBoot项目使用IntelliJ IDEA建立SpringBoot项目,引入Lombok 和Web两个依赖. 1.2 确定项目目录结构项目目录结构如下图,需要 ...
java返回json ajax_Spring MVC 中 AJAX请求并返回JSON的示例
一.以modelandview的方式返回先看下javascript代码: /** * 保存-同步(版本控制库) */ function savesynchronizedvchorse(obj) { ...
ajax使用json下拉框,ajax请求后台得到json数据后动态生成树形下拉框的方法
如下所示: $(function(){ $.ajax({ url:"departmentAction_getAllDep.action", type:"post" ...
ajax返回数据类型为JSON数据的处理
ajax返回数据类型为JSON数据的处理 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
vue如何把数组转为json数组_vue.js,_vuejs Ajax取得一个数据json数组，vue.js - phpStudy...
vuejs Ajax取得一个数据json数组 vuejs Ajax取得一个数据json数组后,要通取回的数据再做判断一定只能通这种方式或者套template标签 {{item.displayWord ...
ajax 通过json xml文件,php+Ajax处理xml与json格式数据的方法示例
本文实例讲述了php+Ajax处理xml与json格式数据的方法.分享给大家供大家参考,具体如下: 一.ajax如何处理xml数据格式 register.php 只需修改上一篇<php+Ajax ...
11月13日上午ajax返回数据类型为JSON数据的处理
ajax返回数据类型为JSON数据的处理 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
html和ajax通信,使用Ajax与服务器（JSON）通信实例
Ajax这个词,不代表任何东西,它仅仅是称呼一系列促进客户端与服务器通信的技术时所用的一个术语.服务器通信时Ajax技术的核心内容,其目标就是从客户端向服务器发送信息,并接受后者的回传,以求在此过程中 ...

Ajax和SpringBoot实现JSON的传输与接收

Ajax和SpringBoot实现JSON的传输与接收相关推荐

最新文章

热门文章