将参数添加到 ajax post -jquery - Javascript (1)

📌 相关文章

📜 将参数添加到 ajax post -jquery - Javascript (1)

📅 最后修改于: 2023-12-03 15:25:17.053000 🧑 作者: Mango

将参数添加到 AJAX POST - jQuery - JavaScript

当我们使用 AJAX 的 POST 请求时，我们通常需要向服务器发送数据。在本教程中，我们将学习如何将参数添加到 AJAX POST 请求中，以便我们可以向服务器发送数据。我们将使用 jQuery 和 JavaScript 来完成此任务。

准备工作

在演示如何将参数添加到 AJAX POST 请求之前，我们需要进行一些准备工作。首先，我们需要一个服务器端脚本，可以接受 POST 请求并处理接收到的数据。在本教程中，我们将使用 PHP 来处理 POST 请求。如果您使用其他服务器端技术，请相应地调整代码。

创建一个名为 process.php 的文件，并将以下代码粘贴到其中：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $data = json_decode(file_get_contents('php://input'), true);
  echo 'Hello, ' . $data['name'] . '!';
}
?>

该脚本将在接收到 POST 请求时解析 JSON 数据并返回带有“Hello”消息的响应。在本例中，我们期望传递一个名为“name”的参数。

接下来，我们需要在 HTML 文件中添加必要的元素。创建一个名为 index.html 的文件，并将以下代码粘贴到其中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX POST Example</title>
</head>
<body>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <button type="submit">Say Hello</button>
  </form>
  <div id="result"></div>
</body>
</html>

该文件包括一个表单和一个 DIV，用于显示服务器响应。

使用 jQuery 发送 AJAX POST 请求

我们将使用 jQuery 的 $.post() 函数来发送 AJAX POST 请求。该函数需要三个参数：请求的 URL、发送到服务器的数据和成功响应处理程序。

我们可以将表单序列化为 JSON，然后将其作为数据发送到服务器。在表单提交时调用 JavaScript 函数，以便发送 AJAX POST 请求。以下就是代码片段：

$('form').on('submit', function(e) {
  e.preventDefault();

  var data = $(this).serializeArray();
  data = JSON.stringify({ name: data[0].value });

  $.post('process.php', data, function(response) {
    $('#result').html(response);
  });
});

该代码片段包括一个处理表单提交事件的函数。它序列化表单数据，并将其转换为 JSON。然后，它调用 $.post() 函数，将 JSON 数据发送到服务器，并在成功响应后更新 DIV 的内容。

完整代码

以下是完整的代码，包括 HTML、JavaScript 和 PHP 文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX POST Example</title>
</head>
<body>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <button type="submit">Say Hello</button>
  </form>
  <div id="result"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $('form').on('submit', function(e) {
      e.preventDefault();

      var data = $(this).serializeArray();
      data = JSON.stringify({ name: data[0].value });

      $.post('process.php', data, function(response) {
        $('#result').html(response);
      });
    });
  </script>
</body>
</html>

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $data = json_decode(file_get_contents('php://input'), true);
  echo 'Hello, ' . $data['name'] . '!';
}
?>

你可以尝试在你的本地服务器上运行这段代码，然后在输入名字后按下“Say Hello”按钮，看看服务器是否正确地处理了请求，并返回了带有“Hello”消息的响应。

以上是 “将参数添加到 AJAX POST - jQuery - JavaScript” 的介绍, 希望对你有帮助。