• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 代码教程 » JavaScript » 正文

WP REST API：创建、更新和删除数据

ngkoma • 2年前 (2022-06-13) • JavaScript

在本系列的前一部分中，我们了解了如何使用 WP rest api 从服务器检索内容。我们学会了检索不同资源的内容，包括帖子、帖子元、标签、类别等。这是一个强大的功能，因为该内容可以在 wordpress 内部或外部的任何地方使用。

我们还 OPTIONS通过列出所有路由、它们的端点和它们各自的参数来了解自记录 API 的请求。这减少了依赖 API 的外部文档的需要，并允许在 API 已更新或更改的情况下相当快地发现更改。

看过这些特性之后，在本教程中，我们现在将注意力集中在 CRUD 的其他三个操作上，即使用 WP REST API创建、更新和删除数据。

在本教程中，我们将：

  • 分析哪些资源支持创建、更新和删除方法

  • 学习创建、更新和删除资源

  • 查看沿请求发送数据以创建资源的方法

  • 分析服务器响应和不同的响应代码

因此，让我们首先分析哪些资源支持使用 WP REST API 的创建、更新和删除方法。

检查路由中的创建、更新和删除方法

在我们直接使用 WP REST API 创建和更新数据之前，我们需要分析哪些路由支持创建和更新方法。我们通过检查 methods其端点中的路由和属性来做到这一点。这可以通过向 OPTIONS单个路由发送单独的请求来完成，但更方便的方法是向索引路由发送 GET请求，/wp-json就像我们在本系列的前一部分中所做的那样。

向路由发送 GET请求会/wp-json返回一个对象，该对象包含属性中的所有路由及其端点 routes。

WP REST API：创建、更新和删除数据 第1张

在这些单独的路由中，我们可以检查特定资源是否支持post、PUT和 DELETE方法。让我们从分析Posts资源开始。

Posts资源通过以下两条路径公开数据：

/wp/v2/posts
/wp/v2/posts/(?P<id>[\d]+)

第一个路由指向post对象的集合，其 method属性如下：

"methods": [
    "GET",
    "POST"
],

该 methods属性表示 /posts路由支持 GET和 POST分别检索和创建数据的方法。

对于 /posts/(?P<id>[\d]+)指向单个Posts资源 的路由，methods属性如下：

"methods": [
    "GET",
    "POST",
    "PUT",
    "PATCH",
    "DELETE"
],

从上面的代码可以看出， /posts/(?P<id>[\d]+)路由支持 GET, POST, PUT, PATCH, 和 DELETE方法。

通过检查上述两个路由，我们可以得出结论，该 /posts路由支持资源检索和创建。并且 /posts/(?P<id>[\d]+)路由支持资源检索以及更新和删除。尽管它确实支持该 POST方法，但该路由不支持资源创建，我们将在下面的示例中看到。

因此，指向单个资源的路由不能用于创建内容，尽管它们确实支持该 POST方法。这是因为，对于这些路由，POST、PUT和 PATCH方法用于更新 WP REST API 中的内容。

为了结束本节，让我们总结一下我们在这里学到的概念：

  • 我们可以通过发送 请求来检查哪些路由支持GET、POST和 方法。DELETEOPTIONS

  • 指向单个实体的路由不能用于创建内容。它们用于更新内容，尽管它们确实支持该 POST方法。

分析了不同的路线后，我们现在准备使用 WP REST API 创建内容，我们将从探索Posts资源开始。

创建和更新帖子

让我们通过从 Postman 或任何其他 HTTP 客户端发送测试请求来创建帖子。为此，请启动您的 HTTP 客户端并向 路由发送POST请求 。/posts但在此之前，请记住，资源的创建、删除和更新需要以具有权限的用户身份 进行身份验证edit_posts。因此，我们将使用我们在本系列的第二部分中学习的基本身份验证方法。

最初，我们在请求中发送一个空的请求正文用于测试目的：

$ POST /wp/v2/posts

服务器将返回400 - Bad Request错误，因为请求正文中缺少所需的参数。服务器将返回以下响应：

WP REST API：创建、更新和删除数据 第2张响应指出创建帖子对象需要 、 或 中的content任何title一个 。excerpt这些参数可以通过以下三种方式之一在请求正文中随请求一起发送：

  1. 作为 JSON 对象

  2. 通过使用表格

  3. 作为URL参数

使用任何这些方法只是一个选择问题，我们将在本教程后面更仔细地研究它们。但是现在让我们使用第一种方法来创建帖子。

要在 Postman 中将参数作为 JSON 对象发送，请切换到Body选项卡并选择raw单选按钮。然后从右侧的下拉列表中选择JSON (application/json)选项。然后，您可以在下面的文本区域中添加 JSON 正文。

WP REST API：创建、更新和删除数据 第3张目前，这个 JSON 正文只包含 title帖子的一个属性。

通过单击发送按钮发送请求。如果一切顺利，服务器将返回一个201 - Created状态，并以新创建的 post 对象作为响应。

WP REST API：创建、更新和删除数据 第4张
这个新创建的帖子的默认状态是draft。我们可以通过发送另一个 , 或请求来更新, 以及其他status一些属性。在我的案例中返回的帖子的 ID 是，因此我将向以下端点发送请求：POSTPUTPATCH232

$ POST /wp/v2/posts/232

status更新和 属性的请求正文 content如下所示：

{
    "status": "publish",
    "content": "This is the content of the post"
}

发送请求后，服务器会返回200 - OK状态，表示帖子更新成功。

在上面的示例中，我们遇到了以下三个创建帖子的参数：

  1. title

  2. status

  3. content

可以通过一个简单的请求来检索用于创建帖子的支持参数的完整列表， OPTIONS如下所示：

$ OPTIONS /wp/v2/posts

然后我们可以检查 方法数组args中的属性 。POST

现在我们已经了解了如何创建和更新帖子，让我们来看看我们可以使用的更多资源。

创建和更新帖子元

更新：在 WP REST API 中使用帖子和页面元现在需要WP REST API 团队在 GitHub 上提供的配套插件。

POST可以通过向以下路由发送请求来创建发布元数据 ：

/wp/v2/posts/(?P<parent_id>[\d]+)/meta

(?P<parent_id>[\d]+)父帖子的ID在哪里 。我将使用我们在上一节中创建的帖子的 ID，即232.

与我们发送请求正文以创建帖子对象的方式类似，可以发送包含两个属性的 JSON 对象来创建帖子元数据。这两个属性是 key和value。

{
    "key": "name",
    "value": "Bilal"
}

key和 value属性 的值 分别是name和 Bilal。

发送请求，服务器会返回一个201 - Created状态码，表明 post meta 已经创建成功。新创建的 post 元对象也将在响应中返回：

WP REST API：创建、更新和删除数据 第5张

请注意，在编写本教程时，WP REST API 不支持整数值来创建帖子元。如果我们尝试在 JSON 对象中发送一个整数值来创建 post meta，服务器将返回400 - Bad Request状态代码。

{
    "key": "value",
    "value": 12345
}

注意 value 周围缺少的引号12345。返回的响应将如下所示：

WP REST API：创建、更新和删除数据 第6张

因此，您随请求发送的创建帖子元数据的任何内容都应采用字符串格式。

数据创建和更新方法

到目前为止，在本教程中，我们一直在请求正文中使用 JSON 格式来创建和更新资源。让我们看一下 WP REST API 为创建和更新数据提供的所有选项。

将数据作为 URL 参数发送

沿着请求发送数据的最简单方法是将其作为 URL 参数发送。考虑以下 POST创建帖子的请求：

$ POST /wp/v2/posts?title=the+title&content=this+is+the+content

上述请求向服务器发送两个参数，分别用于帖子的 title和 content。

同样，为了为 ID 为 的帖子创建帖子元232，我们使用以下 POST请求：

$ POST /wp/v2/posts/232/meta?key=name&value=Bilal

上述请求将创建以下元对象：

WP REST API：创建、更新和删除数据 第7张

当参数是短字符串时，这种方法最适合，如上例所示。但随着参数数量和值长度的增加，将它们作为 URL 参数进行管理变得困难。

将数据作为 JSON 对象发送

使用这种方法，我们将参数作为 JSON 对象中的键/值对来传递请求。到目前为止，我们一直在使用 Postman 向服务器发送请求。我们现在来看看如何使用 html 和jquery来实现这个方法。

考虑以下由 、 和 三个字段组成的title简单status形式content：

<form name="post-form" id="post-form">
    <label for="title">Title</label>
    <input type="text" name="title" id="title">
    
    <label for="status">Status</label>
    <select name="status" id="status">
    	<option value="publish">Publish</option>
    	<option value="draft">Draft</option>
    </select>
    
    <label for="content">Content</label>
    <textarea name="content" id="content"></textarea>
    
    <input type="submit" name="submit" value="Submit">
</form>

提交上述表单时，将执行以下javascript (jQuery) 代码：

var postForm = $( '#post-form' );

var jsondata = function( form ) {
    var arrData = form.serializeArray(),
        objData = {};
    
    $.each( arrData, function( index, elem ) {
        objData[elem.name] = elem.value;
    });
    
    return JSON.stringify( objData );
};

postForm.on( 'submit', function( e ) {
    e.preventDefault();
    
    $.ajax({
        url: 'https://your-dev-server/wp-json/wp/v2/posts',
        method: 'POST',
        data: jsonData( postForm ),
        crossdomain: true,
        contentType: 'application/json',
        beforeSend: function ( xhr ) {
            xhr.setRequestHeader( 'Authorization', 'Basic username:password' );
        },
        success: function( data ) {
            console.log( data );
        },
        error: function( error ) {
            console.log( error );
        }
    });
});

/wp/v2/posts提交上述表单后，我们向路由发送 AJAX 请求 。该 jsonData()方法接受 HTML 表单的 jQuery 实例并将其数据转换为 JSON 格式。data然后在方法的属性中 使用此 JSON 数据 $.ajax()。此外，我们 application/json使用 contentType属性将内容类型设置为。

在发送请求之前，我们将标头设置为包含 Authorization使用基本身份验证方法的标头。我们已经在本系列的第二部分中学习了设置和使用基本身份验证方法。

最后，请求被发送到 /wp/v2/posts路由，并创建一个新的帖子。这个新创建的 post 对象作为响应由服务器返回，我们只需将其登录到 success()方法内的控制台中。

上面的示例演示了使用 JSON 格式沿请求发送数据。此 JSON 对象的来源可以是 HTML 表单以外的任何内容，具体取决于应用程序的体系结构。

请注意，要使上述代码正常工作，您可能需要将 Access-Control-Allow-Headers标头字段设置为包含 Authorization和 Content-Type值。这可以通过在您的 WordPress 中添加以下代码来完成。htaccess文件：

Header set Access-Control-Allow-Headers "Content-Type, Authorization"

现在让我们看看通过 HTML 表单发送数据。

使用表单发送数据

沿请求发送数据的最后一种方法是使用 HTML 表单。这些表单应包含具有该 name属性的字段。该 name属性用作参数名称，如title、status、 content等。这些字段的值用作这些参数的值。

我们可以使用上一个示例中创建的相同 HTML 表单，然后使用以下代码创建一个新帖子：

var postForm = $( '#post-form' );

postForm.on( 'submit', function( e ) {
    e.preventDefault();
    
    $.ajax({
        url: 'http://your-dev-server/wp-json/wp/v2/posts',
        method: 'POST',
        data: postForm.serialize(),
        crossDomain: true,
        beforeSend: function ( xhr ) {
            xhr.setRequestHeader( 'Authorization', 'Basic username:password' );
        },
        success: function( data ) {
            console.log( data );
        }
    });
});

上面的代码和前面的例子一样，只是我们去掉了 jsonData()方法，现在我们使用 jQuery 的 serialize()方法以字符串格式发送表单数据。上面的 jQuery 代码使用默认application/x-www-form-urlencoded内容类型，它以巨大字符串的形式发送数据，参数由 &符号分隔，并且它们的值使用符号分配 =。这有点类似于将数据作为 URL 参数发送，只是它不公开数据。如果数据仅包含字母数字字符，这是一种发送数据的有效方式。

要发送二进制（非字母数字）数据，我们使用 multipart/form-data内容类型。如果我们需要使用 WP REST API 上传图像或其他文件，可以使用此方法。

要在 Postman 中发送表单数据，您可以切换到Body选项卡，然后使用form-data或x-www-form-urlencoded选项。

WP REST API：创建、更新和删除数据 第8张然后可以在键/值对中定义参数以随请求一起发送。

可以在W3C 规范中找到有关不同表单类型的详细信息。

multipart/form-data使用内容类型上传媒体 

现在我们已经了解了 x-www-form-urlencoded表单类型，它以字符串的形式发送数据，让我们开始探索更高级的表单编码类型，即multipart/form-data.

处理二进制数据时使用 multipart/form-data内容类型，因此它可用于将图像或其他文件类型上传到服务器。

在下面的示例中，我们使用由一个和一些 jQuery 组成的简单 HTML 表单，使用路由input[type=”file”]将图像上传到服务器 。/wp/v2/media

考虑以下 HTML 表单：

<form name="image-form" id="image-form">
    <label for="image-input">File</label>
    <input name="image-input" id="image-input" type="file">
    
    <input type="submit" value="Upload">
</form>

提交上述表单时，将执行以下 JavaScript：

var imageForm = $( '#image-form' ),
    fileInput = $('#file'),
    formData = new FormData();

imageForm.on( 'submit', function( e ) {
    e.preventDefault();
    
    formData.append( 'file', fileInput[0].files[0] );
    
    $.ajax({
        url: 'http://your-dev-server/wp-json/wp/v2/media',
        method: 'POST',
        data: formData,
        crossDomain: true,
        contentType: false,
        processData: false,
        beforeSend: function ( xhr ) {
            xhr.setRequestHeader( 'Authorization', 'Basic username:password' );
        },
        success: function( data ) {
            console.log( data );
        },
        error: function( error ) {
            console.log( error );
        }
    });
});

在这里，我们首先获取表单及其输入字段的 jQuery 实例。然后我们初始化一个新 FormData对象。该 FormData接口提供了一种使用键/值对构造multipart/form-data一组表单字段的方法，并使用与表单编码类型相同的格式 。

当表单被提交时，我们通过调用 .preventDefault()事件对象上的方法来阻止它的提交。然后，我们使用该方法将一个新字段附加到 formData实例 。.append()该 .append()方法接受 字段的name和的两个参数。WP REST API将文件输入字段value的属性强制 为. 这就是为什么我们设置第一个参数 -  to be  ，而对于第二个参数，我们通过引用输入元素来传递一个文件 blob 对象。namefilenamefile

默认情况下，传入 方法data属性的 数据jQuery.ajax()被处理成查询字符串。由于我们在这里上传图像文件，我们不希望发生这种情况，为此我们将 processData属性设置为false. 我们还将 contentType属性设置为 false以防止 application/x-www-form-urlencoded作为默认内容类型发送到服务器。

最后，我们将 Authorization标头设置为具有 edit_posts特权的用户身份验证。

请务必从服务器中运行上述脚本。如果一切顺利并且文件被上传，服务器将返回新创建的媒体对象。

WP REST API：创建、更新和删除数据 第9张然后可以将此图像设置为帖子的特色图像。

在仔细研究了使用 WP REST API 创建和更新资源的方法之后，让我们看看如何删除它们。

使用 WP REST API 删除数据

DELETE使用 WP REST API 删除数据就像向特定资源发送请求一样简单 。

如果我们需要删除 ID 为 的帖子10，我们会发送以下 DELETE请求：

$ DELETE /wp/v2/posts/10

这会将帖子移至垃圾箱，但不会永久删除它。为了永久删除帖子，我们使用以下 force参数：

$ DELETE /wp/v2/posts/10?force=true

请注意，在 force删除不支持回收的资源时，该参数是必需的。此类资源的示例是发布元和媒体。

话虽如此，我们现在结束本系列的当前部分。

下一步是什么？

在这个冗长的教程中，我们研究了使用 WP REST API 创建、更新和删除不同类型的资源。我们了解了沿请求发送数据的不同方式，包括以 URL 参数、JSON 格式和使用表单发送数据。在教程的最后，我们学习了通过发送 DELETE请求来删除资源。

在本系列的下一部分也是最后一部分中，我们将了解 WP REST API 及其类的内部结构。我们还将学习扩展 API 以修改服务器响应。在本系列的下一部分中再见——敬请期待……


文章目录
  • 检查路由中的创建、更新和删除方法
  • 创建和更新帖子
  • 创建和更新帖子元
  • 数据创建和更新方法
    • 将数据作为 URL 参数发送
    • 将数据作为 JSON 对象发送
    • 使用表单发送数据
    • multipart/form-data使用内容类型上传媒体
  • 使用 WP REST API 删除数据
  • 下一步是什么？

    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：WP REST API：创建、更新和删除数据
    文章地址：https://www.weixiaolive.com/en/index.php/post/415.html

    相关推荐

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云