重写 jQuery $.ajax 加载更多函数为 XMLHttpRequest JavaScript答案

【问题标题】：Rewriting jQuery $.xjax loadmore function as XMLHttpRequest JavaScript重写 jQuery $.ajax 加载更多函数为 XMLHttpRequest JavaScript
【发布时间】：2020-01-16 15:25:59
【问题描述】：

我在尝试通过 $.ajax 编写 XMLHttpRequest loadmore 函数时遇到了问题，并且不确定我缺少什么。

下面是我的函数，它基于我以前使用过的 $.ajax 版本。使用 jQuery 版本，我使用了一个数据对象，但我无法让它工作 XMLHttpRequest。我已经尝试将它包含在 FormData 中，但我认为这不是正确的方法。

来自 jQuery 版本的数据对象示例，它添加了与帖子类型、与 PHP 函数链接的操作等相关的 WP 特定数据：

data = {
          action: "loadmore",
          query: WP.posts, // that's how we get params from wp_localize_script() function
          page: WP.current_page
        };

const xhr = new XMLHttpRequest();
  const el = document.getElementById("loadmore");

  if (el) {
    el.addEventListener("click", e => {
      e.preventDefault();
      el.value = this.value;

      xhr.onload = function() {
        const button = this;

        if (xhr.status === 200) {
          document.getElementById("response").innerHTML = xhr.responseText;

          if (data) {
            WP.current_page++;
            if (WP.current_page == WP.max_page) button.remove(); // if last page, remove the button
          } else {
            button.remove(); // if no data, remove the button as well
          }
        } else {
          console.log(xhr.status);
          console.log(xhr.response);
          console.log(xhr.responseText);
        }
      };

      xhr.open("POST", WP.ajax, true);

      // const formData = new FormData(el);

      const data = new FormData();
      data.append("action", "loadmore");
      data.append("query", WP.posts);
      data.append("page", WP.current_page);

      xhr.send(data); 
    });
  }

这里是一个工作 jQuery 函数的例子。纯真我想要相同的结果，但使用 XMLHttpRequest ......任何帮助/方向将不胜感激:)

jQuery(function($) {

    $("#loadmore").click(function() {
      var button = $(this),
        data = {
          action: "loadmore",
          query: WP.posts,
          page: WP.current_page
        };

      $.ajax({
        url: WP.ajaxurl, 
        data: data,
        type: "POST",
        beforeSend: function(xhr) {
          button.text("Loading..."); 
        },
        success: function(data) {
          if (data) {
            button
              .text("More posts")
              .prev()
              .before(data); 
            WP.current_page++;

            if (WP.current_page == WP.max_page) button.remove(); 
          } else {
            button.remove();
          }
        }
      });
    });
  });

【问题讨论】：

标签： javascript ajax wordpress xmlhttprequest

【解决方案1】：

所以我想出了解决方案。如果有人对这里感兴趣，那就是：

由于您不能像 $.ajax 那样使用数据对象，因此附加到 formData 可以达到相同的结果，然后在 send 中添加数据 const。

const data = new FormData();
      data.append("action", "loadmore");
      data.append("query", WP.posts);
      data.append("page", WP.current_page);

xhr.send(data);

const xhr = new XMLHttpRequest();
const el = document.getElementById("loadmore");


    el.addEventListener("click", e => {
      e.preventDefault();
      el.value = this.value;

      const data = new FormData();
      data.append("action", "loadmore");
      data.append("query", WP.posts);
      data.append("page", WP.current_page);

      xhr.onload = function() {
        if (xhr.status === 200) {
          document.getElementById("response").innerHTML = xhr.responseText;
          console.log(xhr.responseText);
          WP.current_page++;
        } else {
          console.log(xhr.status);
          console.log(xhr.response);
          console.log(xhr.responseText);
        }
      };

      xhr.open("POST", WP.ajax, true);

      xhr.send(data);
    });

如果有更好的方法，请告诉我。

【讨论】：