AJAX如何使用get请求提交数据给服务器并实现数据局部刷新------AJAX

墨蓝 2024-02-18 09:17 57阅读 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("mySpan").innerHTML = ajax.responseText;
>                 }
>                 else
>                 {
>                   alert(ajax.status);
>                 }
>               }
>             }
>             //开启通道
>             var username = document.getElementById("username").value;
>             var userCode = document.getElementById("userCode").value;
>             ajax.open("GET","/ajax/ajaxRequest2?username="+username+"&userCode=" + userCode,true);
>             //get请求提交数据是在请求行上提交,直接以URL?name=value&name=value&name=value格式提交
>             ajax.send();
>             //这个是HTTP协议规定的
>           }
>         }
>       </script>
>       用户名<input type="text" name="username" id="username">
>       账号<input type="text" name="userCode" id="userCode">
>       <br>
>       <button id="btn">发送AJAX</button>
>       <br>
>       <span id="mySpan"></span>
>     </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("mySpan").innerHTML = ajax.responseText;
>                 }
>                 else
>                 {
>                   alert(ajax.status);
>                 }
>               }
>             }
>             //开启通道
>             var username = document.getElementById("username").value;
>             var userCode = document.getElementById("userCode").value;
>             ajax.open("GET","/ajax/ajaxRequest2?username="+username+"&userCode=" + userCode,true);
>             //get请求提交数据是在请求行上提交,直接以URL?name=value&name=value&name=value格式提交
>             ajax.send();
>             //这个是HTTP协议规定的
>           }
>         }
>       </script>
>       用户名<input type="text" name="username" id="username">
>       账号<input type="text" name="userCode" id="userCode">
>       <br>
>       <button id="btn">发送AJAX</button>
>       <br>
>       <span id="mySpan"></span>
>     </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("/ajaxRequest2")
>     public class ajaxRequest2 extends HttpServlet
>     {
>         @Override
>         protected void doGet(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 userCode = request.getParameter("userCode");
>             if(username != null && userCode != null)
>             {
>                 out.println(username + "&&" + userCode);
>             }
>             else
>             {
>                 out.println("哈哈哈");
>             }
>         }
>     }
> 
>     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("/ajaxRequest2")
>     public class ajaxRequest2 extends HttpServlet
>     {
>         @Override
>         protected void doGet(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 userCode = request.getParameter("userCode");
>             if(username != null && userCode != null)
>             {
>                 out.println(username + "&&" + userCode);
>             }
>             else
>             {
>                 out.println("哈哈哈");
>             }
>         }
>     }