spring boot 學習筆記（005）提交json物件
阿新 • • 發佈：2019-02-04
提交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檔案。檔案打包下載：
4，進入頁面，點選，報錯：
5，原來，ajax做post的時候，預設是{"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"}
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}
如圖：
搞定，打完收功！