一.传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. 微信小程序封装http访问网络库实例代码

    之前都是使用LeanCloud为存储,现在用传统API调用时做如下封装 var HOST = 'http://localhost/lendoo/public/index.php/'; // 网站请求接 ...

  2. nodeJS之进程process对象

    前面的话 process对象是一个全局对象,在任何地方都能访问到它,通过这个对象提供的属性和方法,使我们可以对当前运行的程序的进程进行访问和控制.本文将详细介绍process对象 概述 process ...

  3. js添加多个样式属性cssText

    document.getElementById("box").style.cssText += ";color:red;font-size:20px"; 代码分 ...

  4. GPU编程--Shared Memory(4)

    GPU的内存按照所属对象大致分为三类:线程独有的.block共享的.全局共享的.细分的话,包含global, local, shared, constant, and texture memoey, ...

  5. asp.net MVC 网站图片防盗链的几种方法

    目录 1. 通过 URL Rewrite Module 组件 2. 通过 nginx 图片防盗链 3.自定义 HttpHandler 处理 4. 通过 MVC 自定义路由规则防盗链 5. 通过 MVC ...

  6. M41T11-RTC(实时时钟)

    一.理论准备 1. 主要器件:STM8单片机.M41T11时钟IC.32.768kHz晶振等. 2. 外围设备:烧录工具ST-Link/v2.串口.5v供电SATA线. 3. 主要思想:通过单片机对时 ...

  7. ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  8. Web设计思想——渐进增强

    最近在拜读一本Web体验相关的书<渐进增强--跨平台用户体验设计 >,阅读后做些总结,消化一下书中的精髓. 在阅读本文前,可以先思考下面几个问题. 1. 浏览网页的目的是什么? 2. 浏览 ...

  9. FullCalendar 日历插件中文说明文档

    FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...

  10. Linux命令 查看及修改文件属性

    chmod [功能说明] 改变文件的访问权限  #Linux中访问权限分为:文件属主(文件的创建者)文件组属主(创建者所处的组)和其他(其他用户) [语法格式] Chmod[参数]mode[文件名或目 ...