springmvc 前端 发ajax请求的几种方式

一.传json单值或对象

1.前端

 1 var data = {‘id‘:id,‘name‘:name};
 2 $.ajax({
 3             type:"POST",
 4             url:"user/saveUser",
 5             dataType:"json",
 6             //contentType:"application/json", //不能添加这个头
 7             data:data, //这里不能进行JSON.stringify,发送请求的数据在:form data
 8             success:function(data){
 9
10             }
11          }); 

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) { //没试过,猜测应该是这样,前端字段跟对象属性一致
                                   //自动转化成改对象
     }

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

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

时间: 2024-12-19 21:29:22

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

解决前端跨域请求的几种方式

利用 JSONP 实现跨域调用 说道跨域调用,可能大家首先想到的或者听说过的就是 JSONP 了. 1.1 什么是JSONP JSONP 是 JSON 的一种使用模式,可以解决主流浏览器的跨域数据访问问题.其原理是根据 XmlHttpRequest 对象受到同源策略的影响,而 <script> 标签元素却不受同源策略影响,可以加载跨域服务器上的脚本,网页可以从其他来源动态产生 JSON 资料.用 JSONP 获取的不是 JSON 数据,而是可以直接运行的 JavaScript 语句. 1.2

jquey的 ajax请求的几种方式

在jquery中,提供了集中方法来进行ajax操作 一.$.get(url,[data],[callback]) 向服务器发起get操作. 说明:url为请求地址,data为请求数据的列表(json对象),callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个参数为服务器的状态,是可选参数. 二.$.getJSON(url,[data],[callback]) 向服务器发起get操作. 说明,对于get或getJSON方法,对服务器的返回数据格式要求有区别.

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

JS 点击元素发ajax请求 打开一个新窗口 经常在项目中会碰到这样的需求,点击某个元素后,需要发ajax请求,请求成功以后,开发需要把链接传给前端(或者说请求成功后打开新窗口),前端需要通过新窗口打开这个链接,其实这样的原理大家可能觉得非常简单,想起来非常简单,用JS中的window.open就可以实现打开新的窗口,或者点击div元素,发ajax请求成功后,动态把链接传给a标签,然后再触发a标签事件,也可以实现,对吧?曾几何时,我也曾经把这样的问题发到JS群里面去,很多JS社区朋友说 龙恩 这

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

这里有一条解决在SharePoint 2010搜索爬网时遇到的“拒绝访问错误”的小技巧. 首先要检查默认内容访问帐户是否具有相应的访问权限,或者添加一条相应的爬网规则.如果目标资源库是一个SharePoint库,验证一下该帐号是否具有对该SharePoint web应用程序具有至少“完全读取”的权限. 当我在升级上来的SharePoint环境中对我新建的博客URL进行爬网时遇到了这个错误. 这个错误发生在当你运行Windows 2008 R2和SharePoint 2010并且爬网进程试图访问一

jquery的ajax传递参数两种方式

<script type="text/javascript" src="js/jquery-1.7.js"></script> <script type="text/javascript"> $(function(){ $("#button").click(function(){ $.ajax({ url:'myServlet', type:'post', dataType:'json',

android 向服务器Get和Post请求的两种方式,android向服务器发送文件,自己组装协议和借助第三方开源

/** * @author [email protected] * @time 20140606 */ package com.intbird.utils; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.io.InputStream

实现前端页面跳转的几种方式

实现前端页面跳转的几种方式 推荐使用 <script language='javascript'> document.location = 'http://mail.qq.com/domain/longtimenosee.cc' </script> 相关阅读 http://www.jb51.net/article/25403.htm http://my.oschina.net/ososchina/blog/340854

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

POST请求 有两种方式 一种是组装key=value这种参数对的方式 一种是直接把一个字符串发送过去 作为body的方式 我们在postman中可以看到 sfdsafd sdfsdfds public class KeyWordController : BaseController { private string listClassUrl = "http://192.168.1.171:8789/keywords/list_class"; public ActionResult L

ajax请求中 两种csrftoken的发送方法

通过ajax的方式发送两个数据进行加法运算 html页面 <body> <h3>index页面 </h3> <input type="text" name="cal_1">+ <input type="text" name="cal_2">= <input type="text" name="cal_3"> <