如何将jQuery ajax转换为fetch

Question

这是我以前的jQuery代码。现在我想把它改为提取。

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

我现在已经把代码改成了这个，但我收到了错误的请求400状态码

document.querySelector('#keyword').addEventListener('keyup',()=>{
let data = {
action: 'data_fetch',
keyword: document.querySelector("#keyword").value
};
let url = "<?php echo admin_url('admin-ajax.php'); ?>";
fetch(url, {
method: 'POST', // or 'PUT'
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then((response) => response.text())
.then((data) => {
document.querySelector("#datafetch").innerHTML = data;
})
.catch((error) => {
console.error('Error:', error);
});
})

我是不是错过了什么？如果这在某种程度上有帮助的话，它来自WordPress。

Answer 1

1. 您忘记了数据对象中的pcat属性
2. jQuery默认发送表单编码的数据，而不是JSON编码的数据。使用URLSearchParams对象而不是JSON字符串，并省略内容类型标头(浏览器会为您添加正确的标头(

Answer 2

在jQuery代码中，您将data定义为

data: { action: 'data_fetch', keyword: jQuery('#keyword').val(), pcat: jQuery('#cat').val() },

在fetch中，您将其定义为

let data = {
action: 'data_fetch',
keyword: document.querySelector("#keyword").value
};

因此，您不会传递之前传递的某个值。难怪你的服务器出错了。让我们将您的代码更改为

let data = {
action: 'data_fetch',
keyword: document.querySelector("#keyword").value,
pcat: document.getElementById("cat").value
};

试试这个。如果它仍然有效，那么您需要找出请求中的不同之处，并确保通过fetch发送的请求与通过jQuery正式发送的请求等效，那么它应该运行良好，假设客户端以前使用过jQuery，服务器端正确处理了请求。