Ajax練習二（原生JS非同步請求）
阿新 • • 發佈：2019-01-01
(二)JS非同步請求
這裡我使用的編譯器是WebStorm（不管用哪個編譯器我們的最終結果都是一樣的就是要請求後臺的資料，隨後將後臺返回的結果展示在介面中），後臺的配置請參考Ajax練習一（配置Java後臺）。
這裡用可能會遇到跨域的問題。解決方式只需要在後臺設定即可。因為我後臺用的是SpringMvc，所以只需要在Controller中加上@CrossOrigin註解即可！新增方式如下圖所示：
Get請求
1.設定介面的佈局：
這裡先簡單的設定一些介面效果（因為我不會Html - -！，寫這些純屬三分鐘熱血）。佈局如下：
<!DOCTYPE html>
<html 2.執行介面檢視結果：
首先開啟網頁檢視一下效果，效果如下圖所示：
點選按鈕，請求後臺，請求成功後的效果如下圖所示：
Post請求
1.設定介面的佈局：
這裡同樣的簡單的設定一個介面。提交兩個數字，讓後臺把兩數相加的結果返回。佈局如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 輸入提交的內容 -->
<label>請輸入數字1 : </label>
<input type="number" id="num1">
</br>
<label>請輸入數字2 : </label>
<input type="number" id="num2">
</br>
<!-- 按鈕用來請求後臺的資料 -->
<button id="request">點我請求後臺的資料</button>
<!-- 設定一些操作 -->
<script>
//點選按鈕後向後臺發起請求
document.getElementById("request").onclick = function () {
var getRequest = new XMLHttpRequest();//建立請求物件
getRequest.open("POST", "http://192.168.1.101:8080/MineTest/sum.do", true);//連結伺服器
var postStr = "num1=" + document.getElementById("num1").value +
"&num2=" + document.getElementById("num2").value;
getRequest.setRequestHeader("contentType", "text/html;charset=uft-8");//設定編碼格式
getRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");//表單型別
getRequest.send(postStr);//傳送請求
getRequest.onreadystatechange = function () {
if (getRequest.readyState === 4) {//請求已完成，且響應已就緒
if (getRequest.status === 200) {//請求成功
var resultStr = getRequest.responseText//獲取結果
alert("返回結果 : " + resultStr);
}
else {
alert("錯誤碼 : " + getRequest.status);
}
}
}
}
</script>
</body>
</html>
在後臺的TestController類中新增一個方法，用來接收引數和返回結果,程式碼如下：
/**
* 求和並返回
* @param request
* @param response
* @throws IOException
*/
@RequestMapping(value = "/sum" , method = RequestMethod.POST)
public void sum(HttpServletRequest request,HttpServletResponse response) throws IOException{
response.setCharacterEncoding("UTF-8");
int num1 = Integer.parseInt(request.getParameter("num1"));
int num2 = Integer.parseInt(request.getParameter("num2"));
response.getWriter().write(num1 + " + " + num2 + " = " + (num1 + num2));
}
2.執行介面檢視結果：
開啟網頁檢視一下效果，效果如下圖所示：
輸入數字後點擊按鈕，請求後臺，請求成功後的效果如下圖所示：
