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

来源：互联网发布：上海网页美工培训班编辑：程序博客网时间：2024/04/30 08:35

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

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

[java] view plain copy
 
@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文件：

[html] view plain copy
 
<!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，进入页面，点击，报错：

[html] view plain copy
 
{"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的时候，默认是

[html] view plain copy
 
Content type 'application/x-www-form-urlencoded;charset=UTF-8'  

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

[javascript] view plain copy
 
$.ajaxSetup({    
       contentType : 'application/json'    
   });  

然后访问：

http://localhost:8090/

request内容填入：

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

可以得到结果：

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

如图：

搞定，打完收功！

0 0