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

无效的原版 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);

此外，根据您传递的数据值，您可能需要对其进行编码。同样，在不确切了解您遇到的问题的情况下很难为您提供帮助。

没有 jQuery 的 WordPress AJAX 实时搜索

WordPress AJAX live search without jQuery

javascript

ajax

wordpress

live