Question

如何使用 WP REST API 以纯 Javascript 显示搜索结果？

2019-05-08

247

javascript wordpress

我有一个搜索字段，我想通过从 WP REST API 的 JSON 文件中提取数据来生成用户搜索结果。我需要在纯 JavaScript 中执行此操作，并且我正在为 OOP 在 JavaScript 类中工作。您能告诉我设置代码的最佳方法吗？

我已在类中的调用方法函数 getResults 中尝试过此操作：

getResults() {
    var httpRequest = new XMLHttpRequest()
    httpRequest.onreadystatechange = function (results){
        alert(results.title.rendered);
    }

    httpRequest.open('GET', 'https://website.com/wp-json/wp/v2/pages/');
    httpRequest.send();
}

但是，这给了我一个错误“Uncaught TypeError：无法读取未定义的属性‘rendered’”

我一直在参考这篇文章，其中展示了不同事物的 JQuery 和 Plain JS 版本。我需要使用纯 JS。 https://gist.github.com/joyrexus/7307312

JSON 请求的结果应显示在页面上，并带有帖子标题列表。不过，为了回答这个问题，我只想在 alert() 中显示标题。

Answer 1

httpRequest.onreadystatechange 有一个名为 readyState 的属性，每次请求状态发生变化时都会设置该属性。您需要等到 readyState == 4 才能填充结果对象。

Answer 2

像这样更新您的函数：

function getResults() {
    var httpRequest = new XMLHttpRequest()
    httpRequest.onreadystatechange = function (){
        if (this.readyState == 4 && this.status == 200) {
         obj = JSON.parse(this.responseText);
         alert(obj.title);//if there is a title on your Json response
      }
    }

    httpRequest.open('GET', 'https://website.com/wp-json/wp/v2/pages/');
    httpRequest.send();
}