spring boot 学习笔记（005）提交json对象

最新推荐文章于 2024-05-15 11:11:57 发布

一辉

最新推荐文章于 2024-05-15 11:11:57 发布

阅读量2.5w

点赞数 1

分类专栏： spring 文章标签： spring ajax json spring boot web

本文链接：https://blog.csdn.net/yihui823/article/details/51779959

版权

spring 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

提交post对象应该是很简单的，但是掉ajax的坑里去了。

1，首先，HelloWorld.java 代码中加入：

	@RequestMapping(value="/trequest", method = RequestMethod.POST)  
	@ResponseBody
    public UserInfo trequest(@RequestBody UserInfo pu){

		UserInfo u = new UserInfo();
		u.setUserCode(pu.getUserCode());
		u.setUserName(pu.getUserName());
		u.setDeptCode(pu.getDeptCode());

		return u;
    }

2，在static目录下，新建index.html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>json调试器</title>
    <link rel="stylesheet" href="jquery/jquery.mobile-1.3.2.min.css">
    <script src="jquery/jquery-1.8.3.min.js"></script>
    <script src="jquery/jquery.mobile-1.3.2.min.js"></script>
  </head>

  <body>
  <div data-role="page">
    <div data-role="header">
      <h1>json调试器</h1>
    </div>
  <div data-role="content">
    <form method="post" name="qform">
      <label for="qname">请输入URL：</label>
      <input type="text" name="urltext" id="urltext" value="http://localhost:8090/trequest" />
      <label for="qname">请输入Request内容：</label>
<textarea  id="requesttext"></textarea>
      <input type="button" id="btnPostJson" data-inline="true" οnclick="postJson();" value="提交" />
    </form>
    <label id="responsttxt"></label>
  </div>
    <div data-role="footer">
      <h4 id="foottext"></h4>
    </div>
  </div>
  </body>
  
  <script>
    
  console.log("come in!");

  function postJson() {
    
	console.log(document.getElementById('requesttext').value);

    $.ajax({ 
        type : "POST", 
        url  : qform.urltext.value,  
        cache : false, 
        data : document.getElementById('requesttext').value, 
        success : onSuccessResult, 
        error : onErrorResult
    });
    
    return false; 
  }

  function onSuccessResult(data,status){
	console.log(data);
	var jsondata = JSON.stringify(data);
    console.log(jsondata);
    
    showText(jsondata);
  }

  function onErrorResult(xmlhttprequest, textstatus, errorthrown){ 
    //进行错误处理
    showText(errorthrown);
  }
  
  function showText(txt) {
    var showingtxt = document.getElementById("responsttxt");
    showingtxt.innerHTML = '<label id="responsttxt">' + txt + '</label>';
  }

  </script>
</html>

3，这里，前端用了jquery，需要在static目录下，建立子目录：jquery，

然后上传几个jquery文件。文件打包下载：

http://download.csdn.net/detail/yihui823/9562419

4，进入页面，点击，报错：

{"timestamp":1467133626700,"status":415,"error":"Unsupported Media Type","exception":"org.springframework.web.HttpMediaTypeNotSupportedException","message":"Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported","path":"/trequest"}

5，原来，ajax做post的时候，默认是

Content type 'application/x-www-form-urlencoded;charset=UTF-8'

在“$.ajax({ ”之前，需要加上：

	$.ajaxSetup({  
        contentType : 'application/json'  
    });

然后访问：

http://localhost:8090/

request内容填入：

{"userCode":"h002","userName":"u name"}

可以得到结果：

{"userCode":"h002","userName":"u name","deptCode":null}

如图：

搞定，打完收功！

一辉

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
spring boot 学习笔记（005）提交json对象

提交post对象应该是很简单的，但是掉ajax的坑里去了。1，首先，HelloWorld.java 代码中加入： @RequestMapping(value="/trequest", method = RequestMethod.POST) @ResponseBody public UserInfo trequest(@RequestBody UserInfo
复制链接

扫一扫