AJAX学习笔记——发送AJAX的POST请求，模拟from表单提交

最新推荐文章于 2024-07-25 12:41:07 发布

AJ491

最新推荐文章于 2024-07-25 12:41:07 发布

阅读量2.2k

点赞数 2

本文链接：https://blog.csdn.net/weixin_62117675/article/details/127816648

版权

ajax 学习前端

关于AJAX发送POST请求，首先演示一个小案例。

当输入用户名：张三，密码：123。点击发送请求按钮

这是用post请求模拟的表单提交。接下来看一下如何用AJAX发送POST请求

后端代码：

@WebServlet("/ajaxServlet03")
public class ajaxServlet03 extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");
        response.setContentType("text./html;charset=utf-8");
        PrintWriter out = response.getWriter();
        String username = request.getParameter("username");
        String userpwd = request.getParameter("userpwd");
        out.print("用户名:"+username+",密码:"+userpwd);
    }
}

前端代码（每一步都做了详细笔记）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送ajax post请求</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>

<script type="text/javascript">
    window.onload = function () {
        document.getElementById("mybtn").onclick = function () {
            //1.创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            //2.注册回调函数
            xhr.onreadystatechange = function () {
                if (this.readyState == 4){
                    if (this.status == 200) {
                        document.getElementById("mydiv").innerHTML = this.responseText
                    }else {
                        alert(this.status)
                    }
                }
            }
            //3.开启通道
            xhr.open("POST","/AjaxDemo/ajaxServlet03",true)
            //4.发送请求
            //怎么模拟AJAX提交from表单呢？    设置请求头的内容类型
            //设置请求头的内容类型时，必须在open前，send之后。
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")//不设置就不会发送请求到servlet

            //放到send()这个函数的小括号当中的数据，会自动在请求体当中提交数据
            //使用JS代码获取用户输入的用户名和密码
            var username = document.getElementById("username").value;
            var userpwd = document.getElementById("userpwd").value;
            //放在send()中的数据，也要注意格式，及key=value&key=value
            xhr.send("username="+username+"&userpwd="+userpwd)
        }
    }
</script>
用户名:<input type="text" id="username"><br>
密码：<input type="text" id="userpwd"><br>
<button id="mybtn">发送ajax POST请求</button>
<div id="mydiv"></div>
</body>
</html>

注意：

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

这段代码会用来设置请求头的内容类型的，及用于模拟from表单。

但是这段代码必须放在开启通道后，发送请求前。（即，open前和send后）

AJAX POST请求和GET请求的代码区别在哪里？就是前端代码有区别。后端代码没有区别。

// 4. 发送AJAX POST请求
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") // 设置请求头的内容类型。模拟form表单提交数据。
// 获取表单中的数据
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// send函数中的参数就是发送的数据，这个数据在“请求体”当中发送。
xhr.send("username="+username+"&password="+password)