spring boot 学习笔记(005)提交json对象

提交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}


如图:



搞定,打完收功!





展开阅读全文

没有更多推荐了,返回首页