前言
之前一直寫後端的接口，沒有前後端調試過，這段時間有機會來試試了，下邊就直接上代碼吧！
正文
調試界面
返回的數據
html代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.response;
// alert(xmlhttp.responseText);
// alert(xmlhttp.response);
}
}
//發送請求
//xmlhttp.open("GET","http://localhost:8080/JGGFramee/test",true);
//xmlhttp.open("POST","http://localhost:8080/oa/affiche/dept/query.do",true);
xmlhttp.open("POST", "http://localhost:8080/JGGFramee/getUser",true);
xmlhttp.send("username=admin&password=12345");
//xmlhttp.send();
}
</script>
</head>
<body id="myDiv">
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">請求數據</button>
<!-- <div id="myDiv"></div> -->
</body>
</html>
後端方法
@RequestMapping(value = "/getUser")
@ResponseBody
public String getList(HttpServletRequest request, HttpServletResponse response , User user) throws IOException {
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Methods","POST, GET, PUT, OPTIONS, DELETE");
BufferedReader reader = request.getReader();
char[] buf = new char[512];
int len = 0;
StringBuffer contentBuffer = new StringBuffer();
while ((len = reader.read(buf)) != -1) {
contentBuffer.append(buf, 0, len);
}
return contentBuffer.toString();
}
結束
中間涉及到的問題很多，有待整理發出來呢！
