html页面怎么请求后台

Hey小伙伴们，今天来聊聊一个超级实用的技能——如何让HTML页面和后台对话，是不是听起来有点技术范儿？别担心，我会用最简单的方式，带你一步步了解这个过程。

我们得知道HTML页面和后台之间是怎么沟通的，想象一下，你的HTML页面就像是一个前台接待员，而后台则是后厨的大厨，前台接待员需要告诉大厨客人点了什么菜，大厨才能做出相应的美味佳肴来，在网页的世界里，这种沟通就是通过HTTP请求来实现的。

什么是HTTP请求？

HTTP（超文本传输协议）是一种网络通信协议，它定义了客户端（比如浏览器）和服务器之间如何交换信息，当你在浏览器中输入一个网址，浏览器就会发送一个HTTP请求到服务器，服务器处理这个请求后，会返回一个HTTP响应，这个响应包含了你的网页内容。

GET和POST请求

在HTTP请求中，最常见的两种方法是GET和POST，它们都是用来从服务器请求数据的，但用途和工作方式有所不同。

GET请求：通常用于请求服务器上的资源，当你在浏览器地址栏输入一个网址时，浏览器就会发送一个GET请求到服务器，请求网页内容，GET请求的信息会附加在URL后面，因此容易被看到，不适合发送敏感信息。

POST请求：用于向服务器提交数据，当你在网站上填写表单并提交时，表单的数据就是通过POST请求发送给服务器的，POST请求的数据是包含在请求体中的，对外界不可见，更适合发送敏感信息。

如何在HTML页面发起请求？

现在我们知道了HTTP请求的基础知识，接下来我们来看看如何在HTML页面中发起这些请求。

使用JavaScript

在HTML页面中，我们通常会用JavaScript来发起HTTP请求，这里有两种流行的库可以帮助我们：jQuery和Fetch API。

使用jQuery发起GET请求：

  $.ajax({
      url: 'your-backend-url',
      type: 'GET',
      success: function(response) {
          // 处理响应数据
      },
      error: function(error) {
          // 处理错误
      }
  });

使用Fetch API发起GET请求：

  fetch('your-backend-url')
      .then(response => response.json())
      .then(data => {
          // 处理数据
      })
      .catch(error => {
          // 处理错误
      });

使用Fetch API发起POST请求：

  fetch('your-backend-url', {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json',
      },
      body: JSON.stringify({
          key: 'value'
      })
  })
  .then(response => response.json())
  .then(data => {
      // 处理数据
  })
  .catch(error => {
      // 处理错误
  });

使用表单

除了JavaScript，HTML表单也可以直接发起GET或POST请求，你只需要在表单标签中指定method属性。

GET请求的表单：

  <form action="your-backend-url" method="get">
      <input type="text" name="key" value="value">
      <button type="submit">Submit</button>
  </form>

POST请求的表单：

  <form action="your-backend-url" method="post">
      <input type="text" name="key" value="value">
      <button type="submit">Submit</button>
  </form>