将 jQuery $.xjax loadmore 函数重写为 XMLHttpRequest JavaScript

Question

我在尝试通过 $.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(); } } }); }); });

Answer 1

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

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

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

如果有更好的方法来做到这一点，请告诉我。