当前位置：首页 > 行业动态 > 正文

html中如何发请求

admin
行业动态
2024-04-04
3020

在HTML中，我们无法直接发送请求，我们可以使用JavaScript（运行在浏览器中的脚本语言）来发送请求，JavaScript提供了多种方法来发送请求，如XMLHttpRequest、Fetch API等，下面将详细介绍如何使用这些方法在HTML中发送请求。

1、XMLHttpRequest

XMLHttpRequest是一种在无需刷新整个页面的情况下，与服务器交换数据并更新部分网页内容的技术，以下是一个简单的示例，展示了如何使用XMLHttpRequest发送GET请求：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf8">
  <title>XMLHttpRequest示例</title>
  <script>
    function sendGetRequest() {
      var xhr = new XMLHttpRequest(); // 创建一个新的XMLHttpRequest对象
      xhr.onreadystatechange = function() { // 设置回调函数，当请求状态发生变化时触发
        if (xhr.readyState == 4 && xhr.status == 200) { // 判断请求是否完成且成功
          console.log(xhr.responseText); // 输出服务器返回的数据
        }
      };
      xhr.open("GET", "https://api.example.com/data", true); // 初始化请求，指定请求类型、URL和是否异步
      xhr.send(); // 发送请求
    }
  </script>
</head>
<body>
  <button onclick="sendGetRequest()">发送GET请求</button>
</body>
</html>

2、Fetch API

Fetch API是一个现代的网络请求API，它提供了一个更加简洁、灵活的方式来处理HTTP请求，以下是一个简单的示例，展示了如何使用Fetch API发送GET请求：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf8">
  <title>Fetch API示例</title>
  <script>
    async function sendGetRequest() {
      try {
        const response = await fetch("https://api.example.com/data"); // 发送GET请求
        if (response.ok) { // 判断请求是否成功
          const data = await response.text(); // 获取服务器返回的数据
          console.log(data); // 输出数据
        } else {
          console.error("请求失败"); // 输出错误信息
        }
      } catch (error) {
        console.error("请求出错：", error); // 输出错误信息
      }
    }
  </script>
</head>
<body>
  <button onclick="sendGetRequest()">发送GET请求</button>
</body>
</html>

3、POST请求示例

以下是一个使用XMLHttpRequest和Fetch API发送POST请求的示例：

XMLHttpRequest示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf8">
  <title>XMLHttpRequest示例</title>
  <script>
    function sendPostRequest() {
      var xhr = new XMLHttpRequest(); // 创建一个新的XMLHttpRequest对象
      xhr.onreadystatechange = function() { // 设置回调函数，当请求状态发生变化时触发
        if (xhr.readyState == 4 && xhr.status == 200) { // 判断请求是否完成且成功
          console.log(xhr.responseText); // 输出服务器返回的数据
        }
      };
      xhr.open("POST", "https://api.example.com/data", true); // 初始化请求，指定请求类型、URL和是否异步
      xhr.setRequestHeader("ContentType", "application/json;charset=UTF8"); // 设置请求头，指定数据类型和字符集
      xhr.send(JSON.stringify({key: "value"})); // 发送请求，将数据转换为JSON字符串并发送
    }
  </script>
</head>
<body>
  <button onclick="sendPostRequest()">发送POST请求</button>
</body>
</html>

Fetch API示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf8">
  <title>Fetch API示例</title>
  <script>
    async function sendPostRequest() {
      try {
        const response = await fetch("https://api.example.com/data", { // 发送POST请求，指定第二个参数为配置对象，包含请求头等信息
          method: "POST", // 指定请求类型为POST
          headers: { "ContentType": "application/json;charset=UTF8" }, // 设置请求头，指定数据类型和字符集
          body: JSON.stringify({key: "value"}) // 将数据转换为JSON字符串并作为请求体发送
        });
        if (response.ok) { // 判断请求是否成功
          const data = await response.text(); // 获取服务器返回的数据
          console.log(data); // 输出数据
        } else {
          console.error("请求失败"); // 输出错误信息
        }
      } catch (error) {