【04】AJAX发送POST请求

原创已于 2026-03-15 16:41:18 修改 · 1k 阅读

28 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

AJAX

于 2025-01-10 23:26:50 首次发布

AJAX发送POST请求

一、发送POST请求
二、设置请求体
三、设置自定义请求头

一、发送POST请求

1.test.html中的内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">点击发送请求</button>
    <div id="dd"></div>
    <script>
      let btn = document.getElementById("btn");
      let dd = document.getElementById("dd");
      btn.onclick = function () {
        const xhr = new XMLHttpRequest();
        xhr.open("POST", "http://127.0.0.1:8000");
        xhr.send("a=100&b=200&c=300");
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              dd.innerHTML = xhr.response; //将响应体中的内容添加到文本框dd中
            }
          }
        };
      };
    </script>
  </body>
</html>

test.js中的内容：

const express = require("express");
const app = express();
app.get("/", (request, response) => {
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.send("HELLO EXPRESS");
});
app.post("/", (request, response) => {
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.send("HELLO EXPRESS");
});
app.listen(8000, () => {
  console.log("服务启动,800端口监听中……");
});

2.查看浏览器的显示结果：

二、设置请求体

1.test.html中的内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">点击发送请求</button>
    <div id="dd"></div>
    <script>
      let btn = document.getElementById("btn");
      let dd = document.getElementById("dd");
      btn.onclick = function () {
        const xhr = new XMLHttpRequest();
        xhr.open("POST", "http://127.0.0.1:8000");
        //设置请求头  (头的名字，头的值)
        xhr.setRequestHeader(
          "Content-Type",
          "application/x-www-form-urlencoded"
        );
        // 发送
        xhr.send("a=100&b=200&c=300");
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              dd.innerHTML = xhr.response; 
            }
          }
        };
      };
    </script>
  </body>
</html>

test.js中的内容：

const express = require("express");
const app = express();
app.get("/", (request, response) => {
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.send("HELLO EXPRESS");
});
app.POST("/", (request, response) => {
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.send("HELLO EXPRESS");
});
app.listen(8000, () => {
  console.log("服务启动,800端口监听中……");
});

2.查看浏览器的显示结果：

三、设置自定义请求头

1.test.html中的内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">点击发送请求</button>
    <div id="dd"></div>
    <script>
      let btn = document.getElementById("btn");
      let dd = document.getElementById("dd");
      btn.onclick = function () {
        const xhr = new XMLHttpRequest();
        xhr.open("POST", "http://127.0.0.1:8000/server");
        //设置自定义请求头
        xhr.setRequestHeader(
          "Content-Type",
          "application/x-www-form-urlencoded"
        );
        xhr.setRequestHeader("name", "xiaohong");
        // 发送
        xhr.send("a=100&b=200&c=300");
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              dd.innerHTML = xhr.response; //将响应体中的内容添加到文本框dd中
            }
          }
        };
      };
    </script>
  </body>
</html>

test.js中的内容：

const express = require("express");
const app = express();
app.get("/server", (request, response) => {
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.send("HELLO EXPRESS");
});

app.all("/server", (request, response) => {
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.setHeader("Access-Control-Allow-Headers", "*");
  response.send("HELLO EXPRESS");
});
app.listen(8000, () => {
  console.log("服务启动,800端口监听中……");
});