没有 jQuery 的 WordPress AJAX 实时搜索

Question

我正在尝试在不使用 jQuery 的情况下在 WP 网站上进行 ajax 实时搜索，因为我不想为此功能加载额外的 80kb。我已经让它与 jQuery 一起使用，但是当我尝试重写脚本以使用 Vanilla js 时，我总是遇到问题

wp-admin/admin-ajax.php 400（错误请求）

工作代码

jQuery.ajax({
    url: '<?php echo admin_url('admin-ajax.php'); ?>',
    type: 'post',
    data: { action: 'data_fetch', keyword: jQuery('#keyword').val() },
    success: function(data) {
        jQuery('#datafetch').html( data );
    }
});

不起作用的 VANILLA JS 代码

var request = new XMLHttpRequest();
request.open('POST', '<?php echo admin_url("admin-ajax.php"); ?>', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

request.onload = function () {
  if (this.status >= 200 && this.status < 400) {
    console.log('if');
  } else {
    console.log('else');
  }
};

request.onerror = function() {
  console.log('onerror');
};

var data = document.getElementById('keyword').value;
request.send(data);

Answer 1

我在不知道您的问题的情况下看到的明显问题是 request.send(data); 不等于 { action: 'data_fetch', keyword: jQuery('#keyword').val() } 相反，您应该编写类似 request.send('action=data_fetch&keyword='+data); 的内容

此外，根据您传递的数据值，您可能需要对其进行编码。同样，在不确切知道您遇到的问题的情况下帮助您有点困难。