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

旧约Alatus

已于 2023-11-12 17:27:39 修改

阅读量170

点赞数 1

分类专栏：计算机网络 JAVA AJAX 文章标签： javascript 前端 java-ee java servlet tomcat ajax

于 2023-11-12 16:51:48 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134362635

版权

JAVA 同时被 3 个专栏收录

533 篇文章 3 订阅

订阅专栏

计算机网络

130 篇文章 0 订阅

订阅专栏

AJAX

45 篇文章 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>");
    }
}