一.传json单值或对象

1.前端

 var data = {'id':id,'name':name};
$.ajax({
type:"POST",
url:"user/saveUser",
dataType:"json",
//contentType:"application/json", //不能添加这个头
data:data, //这里不能进行JSON.stringify,发送请求的数据在:form data
success:function(data){ }
});

2.后端

//看成单值
@RequestMapping(value = "save", method = {RequestMethod.POST }})
@ResponseBody
public void save(@RequestParam int id,String name) { //这里字段要跟前端一致,@RequsetParam 可以不加,默认调用的就是它 }
//看成对象
@RequestMapping(value = "save", method = {RequestMethod.POST }})
@ResponseBody
public void save(User user) { //前端字段跟对象属性一致
//自动转化成改对象
}

二.json对象转成字符串后传值

1.1、前端

$.ajax({
type:"POST",
url:"user/saveUser",
dataType:"json",
contentType:"application/json", //需添加这个头
data:JSON.stringify(data), //发送请求的数据在request payload
success:function(data){ }
});

1.2、后端

//看成对象
@RequestMapping(value = "save", method = {RequestMethod.POST }})
@ResponseBody
public void save(@RequestBody User user) { //需添加RequestBody注解
//自动转化成改对象
}

三.将对象JSON.stringify后,以第一种方式传递,可实现对象中存对象 {'userList':users,'key1':value1}

1.前台

var user = {'id':id,'name':name};
var jsonStrGoods = JSON.stringify({'gid':gid,...});
$.ajax({
type:"POST",
url:"user/saveUser",
dataType:"json",
// contentType:"application/json", //不添加这个头
data:{'user':JSON.stringify(user),'goods':jsonStrGoods }, //发送请求的数据在request payload
success:function(data){ }
});

2.后台

//看成单值
@RequestMapping(value = "save", method = {RequestMethod.POST }})
@ResponseBody
public void save(@RequestParam String user,String goods) { //这里字段要跟前端一致,@RequsetParam 可以不加,默认调用的就是它
User u= JSON.parseObject(user, User .class);//alibaba.fastjson转换成对象
}
//看成对象
@RequestMapping(value = "save", method = {RequestMethod.POST }})
@ResponseBody
public void save(UserAndGoods ug) { //没试过,猜测应该是这样,前端字段跟对象属性一致
//自动转化成改对象
}

传数组

前台

var arr = str.split(',');
$.ajax({
url:'/appollo-console/manage/user/names/validation',
data:{
names:arr
},
traditional: true,//必须
type:'post',
dataType:'json',
success:function(res){
alert(res);
}
})

后台

@PostMapping("/names/validation")
@ResponseBody
public List<String> validateUserName(String[] names){
List<String> notValidNames = Lists.newArrayList();
notValidNames = userService.findNotValidNames(Arrays.asList(names));
return notValidNames;
}

 

总结:1.如果用JSON.stringify()将对象转成字符串,就需要在ajax请求中指定contentType 为 application/json,且后台需添加 @RequestBody注解;

   2.如果直接传json对象则跟上面的相反,不能指定contentType为 application/json,其默认类型是 application/x-www-form-urlencoded

springmvc 前端 发ajax请求的几种方式的更多相关文章

  1. jquey的 ajax请求的几种方式

    在jquery中,提供了集中方法来进行ajax操作 一.$.get(url,[data],[callback]) 向服务器发起get操作. 说明:url为请求地址,data为请求数据的列表(json对 ...

  2. JS 点击元素发ajax请求 打开一个新窗口

    JS 点击元素发ajax请求 打开一个新窗口 经常在项目中会碰到这样的需求,点击某个元素后,需要发ajax请求,请求成功以后,开发需要把链接传给前端(或者说请求成功后打开新窗口),前端需要通过新窗口打 ...

  3. Django学习——ajax发送其他请求、上传文件(ajax和form两种方式)、ajax上传json格式、 Django内置序列化(了解)、分页器的使用

    1 ajax发送其他请求 1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释 2 使用inp ...

  4. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  5. 第二节:SSL证书的申请、配置(IIS通用)及跳转Https请求的两种方式

    一. 相关概念介绍 1. SSL证书服务 SSL证书服务由"服务商"联合多家国内外数字证书管理和颁发的权威机构.在xx云平台上直接提供的服务器数字证书.您可以在阿里云.腾讯云等平台 ...

  6. C#中Post请求的两种方式发送参数链和Body的

    POST请求 有两种方式 一种是组装key=value这种参数对的方式 一种是直接把一个字符串发送过去 作为body的方式 我们在postman中可以看到 sfdsafd sdfsdfds publi ...

  7. Spring MVC中forward请求转发2种方式(带参数)

    Spring MVC中forward请求转发2种方式(带参数) http://www.51gjie.com/javaweb/956.html  

  8. 解决 SharePoint 2010 拒绝访问爬网内容源错误的小技巧(禁用环回请求的两种方式)

    这里有一条解决在SharePoint 2010搜索爬网时遇到的“拒绝访问错误”的小技巧. 首先要检查默认内容访问帐户是否具有相应的访问权限,或者添加一条相应的爬网规则.如果目标资源库是一个ShareP ...

  9. nginx分发请求的2种方式:1、指明server_name;2、通过location过滤uri来分发请求;

    user nginx; worker_processes 8; # = cpu num; error_log /data/nginx/log/error/error.log warn; # warn, ...

随机推荐

  1. 容器扩展属性 IExtenderProvider 实现WinForm通用数据验证组件

    大家对如下的Tip组件使用应该不陌生,要想让窗体上的控件使用ToolTip功能,只需要拖动一个ToolTip组件到窗口,所有的控件就可以使用该功能,做信息提示. 本博文要记录的,就是通过容器扩展属性 ...

  2. VR全景智慧城市,平台属于每个有创业梦想的人

    如果你还在人生十字路口迷茫,如果你还想你的人生有所成就,让你的人生有不一样的精彩,就来全景智慧城市平台共同打造属于自己的不同凡响的精彩人生吧! 抓住这个机遇,你就走在了 VR时代的前沿,时势造就英雄, ...

  3. angularjs中使用轮播图指令swiper

    我们在angualrjs移动开发中遇到轮播图的功能 安装 swiper  npm install --save swiper   或者 bower install --save swiper 引入文件 ...

  4. js变量提升和函数提升

    变量,作为编程语言最基础的部分,每种语言的变量不尽相同,但又大径相庭.大部分编程语言的变量有块级作用域,如if.for.while... 但JavaScript不纯在块级作用域,而是函数作用域,并且有 ...

  5. JavaScript中for循环的使用详解

    or循环是循环最紧凑的形式,并包含有以下三个重要部分组成: 循环初始化计数器的初始值.初始化语句执行循环开始之前. 测试语句,将测试如果给定的条件是真还是假.如果条件为真,那么将要执行的循环中给定的代 ...

  6. 添加OpenStack Mitaka源

    sudo apt-get install ubuntu-cloud-keyring sudo add-apt-repository cloud-archive:mitaka 同理,可以添加其它版本,如 ...

  7. NodeJS 实现手机短信验证 模块阿里大于

    1,NodeJS 安装阿里大于模块 切换到项目目录使用npm 安装阿里于模块 npm i node-alidayu --save 2,aliyu官网使用淘宝账户登录 登录阿里大于 https://do ...

  8. 版本控制工具svn的安装与简单使用

    版本控制工具多用于多人协作开发项目中,这不同于个人开发项目,想把自己代码怎样放置都可以,而且删除了代码很难查找. 版本控制工具类似于个人处理钱的过程,放于自己口袋管理类似于个人开发情形,如果自己钱丢了 ...

  9. 关于MATLAB处理大数据坐标文件2017620

    暑假已至,接下来组内成员将会各回各家,各找各妈,这肯定是对本次大数据比赛是很不利的. 接下来我会把任务分配给组员,当然任务会比起初的时候轻一点,因为我认为本次比赛的目的并不是我要求组员做什么,而是我的 ...

  10. java 单链表的实现

    package liaobiao;//链表测试public class Node { private int value; private Node next; //存放下一个节点的指针 //构造方法 ...