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

来源：互联网发布：linux终端界面编辑：程序博客网时间：2024/05/21 09:01

提交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" onclick="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}

如图：

搞定，打完收功！

0 0