网站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网络编程 > Ajax >

AJAX发送POST请求的完整图文教程

Ajax 来源：互联网 作者：佚名 发布时间：2026-11-01 20:33:53 人浏览
摘要

一、发送POST请求 1.test.html中的内容： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 !DOCTYPE html html lang=en head meta charset=UTF-8 / meta name=viewport content=width=device-width, initial-scale=1.0 / title

一、发送POST请求

1.test.html中的内容：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<!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中的内容：

1

2

3

4

5

6

7

8

9

10

11

12

13

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中的内容：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<!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中的内容：

1

2

3

4

5

6

7

8

9

10

11

12

13

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中的内容：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<!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中的内容：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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端口监听中……");

});

2.查看浏览器的显示结果：
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章

  • AJAX发送POST请求的完整图文教程

    AJAX发送POST请求的完整图文教程
    一、发送POST请求 1.test.html中的内容： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 !DOCTYPE html html lang=en head meta charset=UTF-8 / met

  • Ajax免刷新地前后端交互功能

    Ajax免刷新地前后端交互功能
    介绍 AJAX (Asynchronous JavaScript and XML) 是一种创建快速动态网页应用的开发技术，它允许网页在不重新加载整个页面的情况下，与服务器交换数
  • Django使用AJAX向服务器发起请求的操作方法
    AJAX（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术，它允许在不重新加载整个页面的情况下向服务器发送和接收数据

  • AJAX原理以及axios、fetch区别

    AJAX原理以及axios、fetch区别
    AJAX原理 Ajax的原理简单来说是在用户和服务器之间加了个中间层(AJAX引擎)，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，

  • Ajax实现上传图像功能

    Ajax实现上传图像功能
    最终效果展示 xhr发起请求 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

  • Ajax的疑难杂症介绍

    Ajax的疑难杂症介绍
    跨域问题 如图所示，这是通过jquery封装的ajax请求了一个本地的php文件（无框架），console提示CORS策略已阻止来自来源的null：请求的资源上不

  • 前端实现滑动按钮AJAX与后端交互的代码

    前端实现滑动按钮AJAX与后端交互的代码
    html代码 1 2 3 4 div class=switch-box input id=switchButton type=checkbox class=switch / label for=switchButton/label /div css代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1

  • AJAX实现省市县三级联动效果

    AJAX实现省市县三级联动效果
    （tips:其实省市县三级联动只需要引入jQuery省市县三级联动插件就可以实现） 效果图 首先准备两个服务端文件，另一个文件太长，这里就不

  • AJAX实现指定部分页面刷新效果的代码

    AJAX实现指定部分页面刷新效果的代码
    需求：点击左边的选项，不需要整个页面刷新，只进行右边页面的刷新。 这里需要三个文件 work.html !DOCTYPE htmlhtml lang=zh-CNhead meta charset=UTF

  • Ajax实现三级联动的代码

    Ajax实现三级联动的代码
    一、导入数据表和gson.jar 该表包括了中国所有的
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计