使用纯 Javascript 通过 AJAX 发送 WordPress 对象

Posted 2023-02-22

【中文标题】使用纯 Javascript 通过 AJAX 发送 WordPress 对象

【英文标题】：Sending WordPress object via AJAX with pure Javascript

【发布时间】：2017-12-06 05:13:45

【问题描述】：

我在 WordPress 中工作，我正在尝试用纯 javascript 替换我的 jQuery 函数。但是，ajax 调用给我带来了问题。这是我成功的 jQuery 和不成功的 JavaScript：

原始 JQuery

jQuery.ajax(
  url: locals.ajax_url,
  method: 'post',
  context: this,
  data: 
    action: 'get_more_posts',
    page: page,
    loop: typeof loop !== 'undefined' ? loop : locals.wp_query
  
);

新的 JavaScript

var req = new XMLHttpRequest();
req.open('POST', locals.ajax_url, true);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
var l = typeof loop !== 'undefined' ? loop: locals.wp_query;
var s = 'action=get_more_posts&page=' + page + '&loop=' + encodeURIComponent(JSON.stringify(l));
req.send(s);

jQuery 可以工作，但 javascript 没有正确处理循环变量（变量“l”）。

jQuery 发送一个 HTTP 请求，内容如下：

action=get_more_posts&page=2&loop%5Bquery%5D%5Bpage%5D=&loop%5Bquery%5D%5Bpagename%5D=blog&loop%5Bquery_vars%5D%5Bpage%5D=0&loop%5Bquery_vars%5D%5Bpagename%5D=blog&loop%5Bquery_vars%5D%5Berror%5

但 javascript 版本会发送如下内容：

action=get_more_posts&page=2&loop=%7B%22query%22%3A%7B%22page%22%3A%22%22%2C%22pagename%22%3A%22blog%22%7D%2C%22query_vars%22%3A%7B%22page%22%3A0%2C%22pagename%22%3A%22blog%22%2C%22error

所以 jQuery 发送方括号，而 javascript 发送波浪括号（除其他外）。

我知道有几种方法可以解决此问题，但我无法让其中任何一种发挥作用。我很想将请求标头更改为“application/json”，但是我无法让 wordpress 识别其他变量（操作、页面）。否则，我只需要循环变量来正确编码/解码。

如果有帮助，这里是变量：

<script>var loop = <?= json_encode($loop); ?>;</script>

如果有帮助，这里是 php 函数（适用于 jQuery 版本）：

function get_more_posts() 
  $args = $_REQUEST['loop']['query'];
  $args['paged'] = $_REQUEST['page'];
  $loop = new WP_Query($args);
  ...

不确定我是否需要在 php 或 javascript 中进行更改，但答案不能涉及任何外部库，请记住我正在使用 WordPress。如果您需要更多信息，请告诉我。提前致谢。

【问题讨论】：

我的 ajax 有点生疏了，但是如果您发送查询字符串，您的请求不应该是“GET”而不是“POST”吗？

我只是想复制 jquery 发送的内容。

为什么要用 JS 代替 jQuery

这样我就不用加载jquery库了？有什么关系？

【参考方案1】：

想通了。我没有正确解析请求。我需要添加stripslashes，然后我缺少json_decode的第二个参数来返回数组而不是对象。

function get_more_posts() 
  $loop = json_decode(stripslashes($_REQUEST['loop']), true);
  $args = $loop['query'];
  $args['paged'] = $_REQUEST['page'];
  $loop = new WP_Query($args);
  ...

如果其他人尝试类似的事情，希望这会有所帮助。