一.传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. LINQ基础(三)

    一.并行LINQ System.Linq名称空间中包含的类ParallelEnumerable可以分解查询的工作,使其分布在多个线程上. 尽管Enumerable类给IEnumerable<T& ...

  2. SpringMVC——数据校验

    数据校验在web应用里是非常重要的功能,尤其是在表单输入中.在这里采用Hibernate-Validator进行校验,该方法实现了JSR-303验证框架支持注解风格的验证. 一.导入jar包 若要实现 ...

  3. 关于MS12-020一次简单尝试

    由于之前着重于web漏洞,主机漏洞这块比较薄弱.也没有用过metasploit,对于很多系统漏洞还不熟悉,正好这几天不忙,就想着慢慢学习,再写点简单的东西,进行总结记录. 这次尝试的是MS12-020 ...

  4. undefined is not an object (evaluating 'RNFetchBlob.DocumentDir')

    参考https://github.com/wkh237/react-native-fetch-blob/issues/51 自己做了一下总结: 这个报错位置在react-native-fetch-bl ...

  5. 使用OTP动态口令(每分钟变一次)进行登录认证

    GIT地址:https://github.com/suyin58/otp-demo 在对外网开放的后台管理系统中,使用静态口令进行身份验证可能会存在如下问题: (1) 为了便于记忆,用户多选择有特征作 ...

  6. zookeeper-开始

    ZooKeeper:为分布式应用提供的分布式协调服务 ZooKeeper提供一系列原语用于分布式应用构建更高层次的服务,如同步.配置维护.分组以及命名空间. 设计目标: ZooKeeper足够简单且可 ...

  7. implements ApplicationContextAware 获取spring 容器

    1.新建 ApplicationContextUtil 类 ,通过实现 ApplicationContextAware 的 setApplicationContext 方法,得到context上下文: ...

  8. node.js零基础详细教程(7.5):mongo可视化工具webstorm插件、nodejs自动重启模块Node Supervisor(修改nodejs后不用再手动命令行启动服务了)

    第七章 建议学习时间4小时  课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑. ...

  9. Android 7.0 安装器安装过程分析 (com.android.packageinstaller)

    1 安装入口PackageInstallerActivity,这个类只是在安装前做准备.通过各种校验,然后弹出被安装应用的权限框,等待用户安装.具体的流程如下 1.1  求mSessionId 如果是 ...

  10. JS面向对象笔记二

    菜单导航,<JS面向对象笔记一>,  参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函 ...