zoukankan      html  css  js  c++  java
  • jquery之ajax访问spring boot请求——使用@RequestBody

    Spring Boot 2.5.3

    jquery 1.10.2

    jquery 1.12.4

    ---

    使用S.B.开发了一个接口,如下:/test/call

    @RestController
    @RequestMapping(value="/test")
    @Slf4j
    public class TestController {
    
    	@PostMapping(value="/call")
    	public Map<String, Object> call(@RequestBody TestDTO dto) {
    		Map<String, Object> map = new HashMap<>();
    		map.put("id", dto.getId());
    		map.put("name", dto.getName());
    		return map;
    	}
    	
    }
    
    import lombok.Data;
    
    @Data
    class TestDTO {
    
    	private Integer id;
    	
    	private String name;
    	
    }

    使用Postman访问:成功

    但使用下面的前端代码访问时,出现了异常:

    test.html
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>测试页面</title>
    	</head>
    	<body style="background-color:#ddd;">
    	<button id="submit">点击测试</button><br />
    	<label id="rtn"></label>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
    $(function(){
    	console.log("opened");
    });
    
    $("#submit").click(function(){
    	console.log("clicked");
    	var url = "/test/call";
    	var data = '{"id":' + 10 + ',"name":"myname"}';
    	$.ajax({
    		  type: "POST",
    		  url: url,
    		  data: data,
    		  //headers:{'Content-Type':'application/json;charset=utf8'},
    		  dataType: "json",
    		  success: function (jdata, status) {
    			  	console.log("Status: " + status);
    			  	console.log(jdata);
    			  	$("#rtn").html("返回结果:" + JSON.stringify(jdata));
    		  },
    		  error: function (xhr, status) {
    			  console.log("Status: " + status);
    			  console.log(xhr);
    			  window.alert("请求数据失败");
    		  }
    		});
    });
    </script>
    	</body>
    </html>

    浏览器控制台异常信息:

    后台日志显示如下:

    .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: 
    Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]
    

    请求头错误了!

    解决方法:

    jQuery的ajax请求中有一个 headers字段,将其添加上即可。

    headers:{'Content-Type':'application/json;charset=utf8'},

    是headers,因此,可以添加多个请求头。

    添加后的测试结果:控制台输出、页面展示,成功

    更进一步:ajax方法中,除了使用 headers,还可以直接使用 contentType

    	$.ajax({
    		  type: "POST",
    		  url: url,
    		  data: data,
    		  // 方式1
    		  //headers:{'Content-Type':'application/json;charset=utf8'},
    		  // 方式2
    		  contentType: "application/json;charset=utf8",

    注,上面的方式1、2可以同时存在。

    更改后测试:成功。

    补充说明:

    页面使用了 <meta charset="utf-8">,因此,上面 headers、contentType 中的 “;charset=utf8” 可以去掉。

    疑问:jQuery的post方法怎么实现同样的功能呢?

    如下:

    升级前面的jQuery版本:

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

    使用 $.post方法:

    	$.post({
    		  url: url,
    		  data: data,
    		  headers:{'Content-Type':'application/json;charset=utf8'},
    		  dataType: "json",
    		  success: function (jdata, status) {
    			  	console.log("Status: " + status);
    			  	console.log(jdata);
    			  	$("#rtn").html("返回结果:" + JSON.stringify(jdata));
    		  },
    		  error: function (xhr, status) {
    			  console.log("Status: " + status);
    			  console.log(xhr);
    			  window.alert("请求数据失败");
    		  }
    	});

    官方文档中,上面这种方式(jQuery.post( [settings ] ))是 jQuery 1.12-and-2.2 有的:

    》》》全文完《《《

    参考文档

    1、官方:jQuery.ajax()

    2、官文:jQuery.post()

    3、报错: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]

    4、jQuery CDN – Latest Stable Versions

    5、

  • 相关阅读:
    sencha touch 扩展篇之将sencha touch打包成安装程序(上)- 使用sencha cmd打包安装程序
    sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标
    一个不错的android组件的网站
    sencha touch 扩展篇之使用sass自定义主题样式 (上)使用官方的api修改主题样式
    sencha touch 入门系列 (九) sencha touch 布局layout
    面试题总结
    国外接活网站Elance, Freelancer和ScriptLance的介绍和对比
    sencha touch 入门系列 扩展篇之sencha touch 项目打包压缩
    Android Design Support Library——Navigation View
    设计模式——命令模式
  • 原文地址:https://www.cnblogs.com/luo630/p/15313271.html
Copyright © 2011-2022 走看看