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";
    }
}