前端技术干货！Jquery ajax post请求表单数据，返回普通json数据完整解析

前端

2023-11-04 12:18:36

Jquery AJAX POST 请求表单数据：详解及完整指南

什么是 AJAX？

AJAX（异步 JavaScript 和 XML）是一种强大的技术，允许您在不重新加载页面或中断用户体验的情况下与服务器交互。

使用 Jquery 发送 AJAX POST 请求

Jquery 是一个流行的 JavaScript 库，可简化 AJAX 请求。以下是如何使用 Jquery 发送 POST 请求：

创建 HTML 表单： 创建一个 HTML 表单收集用户输入。
编写 Jquery 代码： 使用 Jquery 的 ajax() 方法创建 AJAX 请求。指定请求类型（POST）、目标 URL 和表单数据（通过 serialize() 序列化）。
处理服务器响应： 使用 success 回调函数处理服务器返回的数据。

解析服务器响应

服务器可以返回各种格式的数据，如 JSON、HTML 或文本。Jquery 会自动将 JSON 响应解析为 JavaScript 对象。

完整示例

以下是一个完整示例，包括 HTML 表单、Jquery 代码和服务器端 PHP 代码：

<!DOCTYPE html>
<html>
<head>
  <script src="jquery.min.js"></script>
</head>
<body>
  <form id="myForm">
    <label for="name">姓名：</label>
    <input type="text" id="name">
    <br>
    <label for="age">年龄：</label>
    <input type="number" id="age">
    <br>
    <input type="submit" value="提交">
  </form>

  <script>
    $(document).ready(function() {
      $("#myForm").submit(function(e) {
        e.preventDefault();

        $.ajax({
          type: "POST",
          url: "server.php",
          data: $("#myForm").serialize(),
          success: function(response) {
            console.log(response);
          }
        });
      });
    });
  </script>
</body>
</html>

<?php
// 获取表单数据
$name = $_POST['name'];
$age = $_POST['age'];

// 将数据存储到数据库或其他存储系统中

// 返回 JSON 响应
echo json_encode(['name' => $name, 'age' => $age]);
?>