提交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"}
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}
如图:
搞定,打完收功!