AJAX模拟POST请求向后台提交数据并从服务器获取信息------AJAX

比眉伴天荒 2024-02-18 09:18 24阅读 0赞

>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>       <meta charset="UTF-8">
>       <title>Title</title>
>     </head>
>     <body>
>     <script type="text/javascript">
>       window.onload = function ()
>       {
>         document.getElementById("btn").onclick = function ()
>         {
>           var ajax = new XMLHttpRequest();
>           ajax.onreadystatechange = function ()
>           {
>             if(ajax.readyState === 4)
>             {
>               if(ajax.status === 200)
>               {
>                 document.getElementById("myDiv").innerHTML = ajax.responseText;
>               }
>               else
>               {
>                 alert(ajax.status);
>               }
>             }
>           }
>           ajax.open("POST","/ajax/AJAXRequest3",true);
>           //send方法就是放在请求体里面提交的
>           //会自动在请求体提交数据
>           //使用js获取用户名密码
>           var username = document.getElementById("username").value;
>           var password = document.getElementById("password").value;
>           console.log(username);
>           console.log(password);
>           //需要模拟ajax为form表单
>           //这个设置不可以放在open开启链接之前
>           ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
>           //我们需要设置form的请求头的内容类型
>           //这里的格式依旧是遵循Http协议来,需要遵循name=value的格式提交
>           //下面就会模拟form表单了
>           ajax.send("username=" + username + "&password=" + password);
>         }
>       }
>     </script>
>     用户名<input type="text" name="username" id="username">
>     <br>
>     密码<input type="password" name="password" id="password">
>     <br>
>     <button id="btn">发送AJAX的Post</button>
>     <br>
>     <div id="myDiv"></div>
>     </body>
>     </html>
> 
>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>       <meta charset="UTF-8">
>       <title>Title</title>
>     </head>
>     <body>
>     <script type="text/javascript">
>       window.onload = function ()
>       {
>         document.getElementById("btn").onclick = function ()
>         {
>           var ajax = new XMLHttpRequest();
>           ajax.onreadystatechange = function ()
>           {
>             if(ajax.readyState === 4)
>             {
>               if(ajax.status === 200)
>               {
>                 document.getElementById("myDiv").innerHTML = ajax.responseText;
>               }
>               else
>               {
>                 alert(ajax.status);
>               }
>             }
>           }
>           ajax.open("POST","/ajax/AJAXRequest3",true);
>           //send方法就是放在请求体里面提交的
>           //会自动在请求体提交数据
>           //使用js获取用户名密码
>           var username = document.getElementById("username").value;
>           var password = document.getElementById("password").value;
>           console.log(username);
>           console.log(password);
>           //需要模拟ajax为form表单
>           //这个设置不可以放在open开启链接之前
>           ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
>           //我们需要设置form的请求头的内容类型
>           //这里的格式依旧是遵循Http协议来,需要遵循name=value的格式提交
>           //下面就会模拟form表单了
>           ajax.send("username=" + username + "&password=" + password);
>         }
>       }
>     </script>
>     用户名<input type="text" name="username" id="username">
>     <br>
>     密码<input type="password" name="password" id="password">
>     <br>
>     <button id="btn">发送AJAX的Post</button>
>     <br>
>     <div id="myDiv"></div>
>     </body>
>     </html>

>     package com.bjpowernode.AJAX.servlet;
>     
>     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("/AJAXRequest3")
>     public class AJAXRequest3 extends HttpServlet
>     {
>         @Override
>         protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
>         {
>             request.setCharacterEncoding("UTF-8");
>             response.setCharacterEncoding("UTF-8");
>             response.setContentType("text/html;charset=UTF-8");
>             PrintWriter out = response.getWriter();
>             String username = request.getParameter("username");
>             String password = request.getParameter("password");
>             out.println("<font color='red'>"+username + "&&" + password +"</font>");
>         }
>     }
> 
>     package com.bjpowernode.AJAX.servlet;
>     
>     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("/AJAXRequest3")
>     public class AJAXRequest3 extends HttpServlet
>     {
>         @Override
>         protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
>         {
>             request.setCharacterEncoding("UTF-8");
>             response.setCharacterEncoding("UTF-8");
>             response.setContentType("text/html;charset=UTF-8");
>             PrintWriter out = response.getWriter();
>             String username = request.getParameter("username");
>             String password = request.getParameter("password");
>             out.println("<font color='red'>"+username + "&&" + password +"</font>");
>         }
>     }