Ajax基本業務實現(POST請求)

時間 2020-09-07

標籤 ajax 基本業務實現 post 請求欄目 Ajax 简体版

原文原文鏈接

基本業務描述
構建一個名爲Ajax-01的html頁面。首先，在文本框中註冊焦點事件，基於焦點事件判斷內容是否存在，其次點擊save按鈕時將用戶內容異步提交到服務器端。javascript

客戶端代碼實現html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!-- html關鍵表單元素設計    -->
    <h1>The Ajax Page</h1>
    <!-- 該標籤的做用是把表單中的相關控件集中起來，造成一個控件組    -->
    <fieldset>
        <!--該標籤用於定義fieldset標籤控件組下的標題      -->
        <legend>Ajax 表單請求</legend>
        <!-- form標籤用於建立供用戶輸入的html表單，該標籤能夠包含一個或多個表單元素
            button    input    keygen    object    output    select    textarea -->
        <form>
            <input type="text" name="name" id="nameId"> <input
                type="button" onclick="doSave()" value="save">
        </form>
        <span id="result"></span>
    </fieldset>
    
    <!--添加JS關鍵業務代碼    -->
    <!-- script標籤用於定義客戶端腳本  script元素既能夠包含腳本語句，也能夠經過 src 屬性指向外部腳本文件。-->
    <script type="text/javascript">
    function doSave(){
        //基於dom事件的Ajax請求
        //1.基於dom事件建立XHR對象
        var xhr=new XMLHttpRequest();
        //2.註冊XHR對象狀態監聽，經過回調函數(rollback)處理狀態信息。
        //onreadystatechange存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                //xhr.responseText獲取響應數據
                document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>";
            }
        };
        //3.建立與服務端的鏈接
        //var name=document.getElementById("nameId").value;
        var name=document.forms[0].name.value;
        xhr.open("POST","/doSave",true);
        //使用post請求要設置請求頭（規定）
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //4.發送異步請求實現與服務端的通信
        xhr.send("name="+name);//Post請求send方法傳值
    }
    </script>
</body>
</html>

服務端代碼實現
服務端中添加代碼以處理客戶端請求。java

package com.cy.ajaxcontroller;
import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

//這是一個服務端,用來處理客戶端的請求
@Controller
@RequestMapping("/")
public class AjaxController {
    //假如這是存儲數據的表
    private List<String> names=new ArrayList<String>();
    @RequestMapping("doSave")
    @ResponseBody
    //將客戶端請求的數據name寫入到names對應的集合
    public String doSave(String name) {
        System.out.println("name="+name);
        names.add(name);
        return "save ok";
    }
}