JavaScript AJAX 前端传值后端接收详解，刷新你的认知！

后端

2023-11-15 03:27:42

AJAX 技术简介

AJAX（Asynchronous JavaScript and XML）是一种用于创建交互式网页的技术。它允许网页在不重新加载整个页面的情况下，与服务器进行异步通信。这使得网页可以更具交互性、动态性和响应性。

AJAX 技术主要通过以下几个步骤实现：

前端发送请求：前端通过 JavaScript 向服务器发送请求，请求可以包含数据。
服务器处理请求：服务器收到请求后，对请求中的数据进行处理，并生成响应。
前端接收响应：前端收到服务器的响应后，对响应中的数据进行处理，并更新网页的内容。

JavaScript AJAX 前端传值后端接收详解

前端发送请求

前端可以使用 XMLHttpRequest 对象来发送请求。XMLHttpRequest 对象是 JavaScript 内置的，因此不需要额外引入库。

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

var xhr = new XMLHttpRequest();
xhr.open("POST", "server.php");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=John&age=30");

在上面的示例中，我们首先创建一个 XMLHttpRequest 对象，然后使用 open() 方法指定请求的类型和 URL。接下来，使用 setRequestHeader() 方法设置请求头，告诉服务器请求的内容类型。最后，使用 send() 方法发送请求，并附带请求的数据。

服务器处理请求

服务器收到请求后，可以使用各种技术来处理请求中的数据。例如，服务器可以使用 PHP、Java 或 Python 来处理请求。

以下是一个使用 PHP 处理请求的示例：

<?php
$name = $_POST["name"];
$age = $_POST["age"];

// 处理数据

echo "Hello, $name! You are $age years old.";
?>

在上面的示例中，我们首先从请求中获取 name 和 age 参数，然后使用这些参数来生成响应。最后，我们使用 echo 语句将响应发送回前端。

前端接收响应

前端收到服务器的响应后，可以使用 XMLHttpRequest 对象的 onreadystatechange 事件来处理响应。

以下是一个使用 XMLHttpRequest 的 onreadystatechange 事件来处理响应的示例：

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = xhr.responseText;

    // 处理响应

    alert(response);
  }
};

在上面的示例中，我们首先设置 XMLHttpRequest 对象的 onreadystatechange 事件处理程序。在事件处理程序中，我们检查 xhr.readyState 和 xhr.status 属性，以确保请求已经完成并且成功。如果请求已经完成并且成功，我们获取响应并将其显示给用户。