SpringMVC接收Ajax通过PUT、POST、GET、DELETE传递的参数

朱雀 2022-04-16 21:17 227阅读 0赞

## 一、问题描述 ##

1.今天在进行SSM+RESTful整合的时候，发现通过AJAX发送的POST和GET请求能正常接收，但是无法通过PUT和DELETE传递参数，网上说在web.xml中加入一个监听器，但是这个只能解决PUT传递问题，没有办法解决DELETE问题

2.经过仔细研究之后，找到了一套解决办法，下面把解决办法分享给大家，如果遇到问题请留言~

## 二、SpringMVC接收Ajax的四大请求传递参数 ##

### 2.1 Controller ###

1.在Controller类的方法中，通过在参数前加上 @RequestBody 注解，将接收的json串放到对象属性中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM0MTA0NDQ2_size_16_color_FFFFFF_t_70][]

### 2.2 发送请求     ###

1.GET请求，GET请求通常用来获取数据而不是传递数据，所以数据直接传递即可![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM0MTA0NDQ2_size_16_color_FFFFFF_t_70 1][]

2.在POST、DELETE、PUT中，如果在控制器参数前指定了 @RequestBody 注解，则不能直接通过 data:\{"key": value\}的形式传递，系统无法解析该类型的参数

3.对于上述问题我们需要通过以下步骤传递参数

*  将需要传递的参数单独写成一个json串存储到一个变量中-用不用引号括起来都可以
    
     *  var jsonStr = \{"id":2, "name": "POST","age": 20\};
     *  var jsonStr = '\{"id":2, "name": "POST","age": 20\}';
 *  需要指定传递的数据类型：contentType: "application/json"
    
     *  很重要！如果不指定这个控制器的 @RequestBody 注解将无法解析传递的json参数
 *  需要将参数转为JSON数据：data: JSON.stringify(jsonStr)
    
     *  将我们提取出来的数据转换为json数据进行传送

### 2.3 传递PUT参数示例 ###

1.传递put参数，post、delete一样的使用方式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM0MTA0NDQ2_size_16_color_FFFFFF_t_70 2][]

2.完整截图

*  Controller

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM0MTA0NDQ2_size_16_color_FFFFFF_t_70 3][]

*  四大请求

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM0MTA0NDQ2_size_16_color_FFFFFF_t_70 4][]

### 2.4 源代码 ###

1.Controller

package com.codecoord.controller;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RestController;
    
    import com.codecoord.dao.PersonMapper;
    import com.codecoord.entity.Person;
    
    @RestController
    public class PersonController {
        // 因为在Spring配置文件中已指定mapper扫描位置，可以自动注入
    	@Autowired
    	private PersonMapper personMapper;
    	
    	/**
    	 * 查询所有数据-返回JSON
    	 */
    	@RequestMapping(value="/persons",method=RequestMethod.GET)
    	public Object persons() {
    		return personMapper.findAll();
    	}
    	
    	/**
    	 * 批量删除数据
    	 */
    	@RequestMapping(value="/person", method=RequestMethod.DELETE)
    	public Object deleteMore(@RequestBody Person person) {
    		// personMapper.delete(id)
    		System.out.println("delete: " + person);
    		return 1;
    	}
    	
    	/**
    	 * 添加数据 @RequestBody 
    	 */
    	@RequestMapping(value="/person", method=RequestMethod.POST)
    	public Object insert(@RequestBody Person person) {
    		// personMapper.insert(person)
    		System.out.println("insert: " + person);
    		return 3;
    	}
    	/**
    	 * 修改数据 @RequestBody 
    	 */
    	@RequestMapping(value="/person", method=RequestMethod.PUT)
    	public Object update(@RequestBody Person person) {
    		System.out.println("update: " + person);
    		return 4;
    	}
    }

2.四大请求

<%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>index</title>
    	
    	<script src="js/jquery-3.3.1.min.js"></script>
    </head>
    <body>
    	<button id="sendGet">发起GET请求</button>
    	<button id="sendPost">发起POST请求</button>
    	<button id="sendPut">发起PUT请求</button>
    	<button id="sendDelete">发起DELETE请求</button>
    	<script type="text/javascript">
    		/* GET请求 */	
    		$("#sendGet").click(function(){
    			// 需要传递的参数
    			$.ajax({
    				type: "get",						// 请求类型
    				url: "persons",						// URL地址
    				success: function(datas) {			// 访问成功
    					alert(datas);
    				},
    				error: function() {					// 请求错误
    					alert("请求失败！");
    				},
    				dataType: "json"					// 返回值类型
    			});
    		});
    		
    		/* POST请求 */
    		$("#sendPost").click(function(){
    			// 需要传递的参数
    			var jsonStr = {"id":2, "name": "POST","age": 20};
    			$.ajax({
    				type: "post",						// 请求类型
    				url: "person",						// URL地址
    				success: function(datas) {			// 成功访问
    					alert(datas);
    				},
    				error: function() {					// 请求错误
    					alert("请求失败！");
    				},
    				contentType: "application/json",	// 传递的数据类型
    				data: JSON.stringify(jsonStr)		// 将参数转为JSON
    			});
    		});
    	
    		/* PUT请求 */
    		$("#sendPut").click(function(){
    			// 需要传递的参数
    			var jsonStr = '{"id":2, "name": "Put","age": 20}';
    			$.ajax({
    				type: "put",						// 请求类型
    				url: "person",						// URL地址
    				success: function(datas) {			// 成功访问
    					alert(datas);
    				},
    				error: function() {					// 请求错误
    					alert("请求失败！");
    				},
    				contentType: "application/json",	// 传递的数据类型
    				data: JSON.stringify(jsonStr)		// 将参数转为JSON
    			});
    		});
    		
    		/* DELETE请求 */
    		$("#sendDelete").click(function(){
    			// 需要传递的参数
    			var jsonStr = {"id": 2, "name": "Delete","age": 20};
    			$.ajax({
    				type: "delete",						// 请求类型
    				url: "person",						// URL地址
    				success: function(datas) {			// 成功访问
    					alert(datas);
    				},
    				error: function() {					// 请求错误
    					alert("请求失败！");
    				},
    				contentType: "application/json",	// 传递的数据类型
    				data: JSON.stringify(jsonStr)		// 将参数转为JSON
    			});
    		});
    	</script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM0MTA0NDQ2_size_16_color_FFFFFF_t_70]: /images/20220417/da54ea9f34bf47239aba3192eefc4dfd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM0MTA0NDQ2_size_16_color_FFFFFF_t_70 1]: /images/20220417/9c1205eb81ad4041b309100356feb593.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM0MTA0NDQ2_size_16_color_FFFFFF_t_70 2]: /images/20220417/327ed309f5b34a8cbefb24fa11adc436.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM0MTA0NDQ2_size_16_color_FFFFFF_t_70 3]: /images/20220417/c7b2177a637f47cc848b3ca3b6c57068.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM0MTA0NDQ2_size_16_color_FFFFFF_t_70 4]: /images/20220417/373e71c6606647238e3165de725ab8c3.png