使用Ajax发送post请求提交表单数据

最新推荐文章于 2024-08-25 13:52:49 发布

程序猿ls

最新推荐文章于 2024-08-25 13:52:49 发布

阅读量1k

点赞数 2

文章标签： ajax javascript 前端 servlet java-ee

本文链接：https://blog.csdn.net/qq_51546137/article/details/129267356

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        onload = function () {
            document.getElementById("btn").onclick = function () {
                let xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if(this.readyState === 4) {
                        if(this.status === 200) {
                            document.getElementById("mydiv").innerHTML = this.responseText;
                        }else {
                            alert(this.status);
                        }
                    }
                }
                xhr.open("post","/ajax/test03",true);
                /*
                 使用Ajax发送post请求提交表单数据的时候，不能将表单中的数据写在请求路径上，只有get请求
                 才是这样的，post请求的数据在请求体中，我们应该将数据放在send(String str)方法中，
                 数据严格按照key=value&key=value....的方式提交。放在send(String str)方法中的数
                 据自动会放在请求体中。
                */
                let username = document.getElementById("username").value;
                let password = document.getElementById("password").value;
                /*
                 注意：使用Ajax发送post请求提交表单数据的时候，要在open方法和send方法之间加以下代码：
                    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                    这句代码的第二个参数不需要记，只需要在form标签中敲"enc"就能看见。
                */
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.send("username="+username+"&password="+password);
            }
        }
    </script>
</head>
<body>
    用户名: <input type="text" id="username">
    <br>
    密码: <input type="password" id="password">
    <br>
    <input type="button" id="btn" value="提交">
    <div id="mydiv"></div>
</body>
</html>

package AjaxRequest;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/test03")
public class AjaxRequest03 extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        out.println("username=" + username + ", password=" + password);
    }
}

运行结果：