博客

Ajax中GET与POST请求操作方法梳理介绍

  • Post category:http

Ajax（Asynchronous JavaScript and XML）是一种用于创建快速动态Web页面的技术。Ajax通过在后台与服务器进行少量数据交换，实现异步更新Web页面。常用的Ajax请求方式有GET与POST请求，本文将详细讲解它们的操作方法。

GET请求

GET请求概述

GET请求是一种从Web服务器请求数据的标准方式，通过URL来传递参数，通常用于获取数据。

GET请求语法

xhr.open("GET", "/data", true);
xhr.send();

GET请求示例一

在HTML页面中包含以下代码：

<p id="demo"></p>

<button type="button" onclick="loadDoc()">Click me</button>

<script>
function loadDoc() {
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhr.open("GET", "ajax_info.txt", true);
  xhr.send();
}
</script>

点击按钮后，上述代码会向服务器发送一个GET请求并获取返回数据，最终将数据显示在网页上。

GET请求示例二

使用jQuery库可以更方便地执行GET请求。在HTML页面中包含以下代码：

<p id="demo"></p>

<button type="button" onclick="loadDoc()">Click me</button>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
function loadDoc() {
  $.get("ajax_info.txt", function(data) {
    $("#demo").html(data);
  });
}
</script>

点击按钮后，上述代码会向服务器发送一个GET请求并获取返回数据，最终将数据显示在网页上。

POST请求

POST请求概述

POST请求也是一种与Web服务器进行数据交换的方式，通常用于提交数据。

POST请求语法

xhr.open("POST", "/submit", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=value&name2=value2");

POST请求示例一

在HTML页面中包含以下代码：

<form>
  <input type="text" id="fname" name="fname"><br>
  <input type="text" id="lname" name="lname"><br><br>
  <button type="button" onclick="saveData()">Submit data</button>
</form>

<script>
function saveData() {
  const xhr = new XMLHttpRequest();
  const fname = document.getElementById("fname").value;
  const lname = document.getElementById("lname").value;
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // 请求完成并成功响应
    }
  };
  xhr.open("POST", "/submit", true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send("fname=" + fname + "&lname=" + lname);
}
</script>

在表单中填写数据并提交后，上述代码会向服务器发送一个POST请求并将数据提交，最终响应由服务器处理。

POST请求示例二

使用jQuery库可以更方便地执行POST请求。在HTML页面中包含以下代码：

<form>
  <input type="text" id="fname" name="fname"><br>
  <input type="text" id="lname" name="lname"><br><br>
  <button type="button" onclick="saveData()">Submit data</button>
</form>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
function saveData() {
  const fname = $("#fname").val();
  const lname = $("#lname").val();
  $.post("/submit", {fname: fname, lname: lname}, function(data) {
    // 请求完成并成功响应
  });
}
</script>

在表单中填写数据并提交后，上述代码会向服务器发送一个POST请求并将数据提交，最终响应由服务器处理。

以上就是对GET与POST请求操作方法的详细介绍，希望能够对您有所帮助。

Tags: