Перезаписать функцию загрузки jQuery $ .xjax как XMLHttpRequest JavaScript

Question

Я столкнулся с проблемами, пытаясь написать функцию loadmore XMLHttpRequest за $. ajax и не уверен, что мне не хватает.

Ниже приведена моя функция, основанная на работающей версии $. ajax, которую я использовал ранее. С jQuery версией я использую объект данных, но я не могу заставить это работать это XMLHttpRequest. Я пытался включить его с FormData, но я не думаю, что это правильный путь к go.

Примеру объекта данных из версии jQuery, который добавляет WP специфицированные c данные, относящиеся к типу записи , действие для связывания с PHP функцией et c:

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();
          }
        }
      });
    });
  });

Answer 1

Итак, я разработал решение. Если кому-то это интересно, это:

Поскольку вы не можете использовать объект данных, как вы можете за $. ajax, добавление к formData достигает тех же результатов, а затем добавляет данные const в send.

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);
    });
  

Если есть лучший способ сделать это, пожалуйста, дайте мне знать.