#17：使用 Ajax 发送 POST 请求

我们在上一个视频中谈到了 GET，但没有对 POST 进行足够多的关注。所以我想在这里做一下。POST 的主要区别在于，您几乎总是需要将数据与请求一起传递。这些数据可以有多种形式，但它可能只是一个您手头的对象。语法也很简单

$.post(
  "/data/process.php",
  {
    name: "Susan",
    job: "Writer"
  }
  function(data, textStatus, jqXHR) {
    // success
  }
);

请注意第二个参数，它是一个数据对象（本质上是 JSON）。该数据可以是任何东西（包括字符串）。您需要以对您的后端有用的方式传递它。

回到我们上一个视频中的表单示例，如果要传递整个表单中的所有数据怎么办？您也不希望在表单更改时更新 JavaScript。jQuery 通过其 serialize() 方法使这变得容易。只需在表单元素本身调用它即可

$("#my-form").serialize();

这将遍历整个表单，并从表单中的每个命名输入中创建一个查询字符串。然后您可以将其用作在 $.post() 时传递的数据。

$("#my-form").on("submit", function() {
  $.post(
    "/",
    $("#my-form").serialize(),
    function(data, textStatus, jqXHR) {
      console.log("success");
    }
  );
});

查看 CodePen 上 Chris Coyier (@chriscoyier) 创建的示例 CtoEg