Este fue mi código jQuery antes. Ahora quiero cambiarlo para buscar.
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 );
}
});
}
He cambiado el código a este ahora, pero recibo un código de estado de solicitud 400 incorrecto
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);
});
})
¿Me estoy perdiendo de algo? Es de WordPress si esto ayuda de alguna manera.
En su código jQuery definió data como
data: { action: 'data_fetch', keyword: jQuery('#keyword').val(), pcat: jQuery('#cat').val() },
y en fetch lo definiste como
let data = {
action: 'data_fetch',
keyword: document.querySelector("#keyword").value
};
por lo tanto, no está pasando algún valor que se pasó previamente. No es de extrañar que su servidor falle. Cambiemos tu código a
let data = {
action: 'data_fetch',
keyword: document.querySelector("#keyword").value,
pcat: document.getElementById("cat").value
};
y prueba esto. Si aún funciona, deberá averiguar qué difiere en la solicitud y asegurarse de que la solicitud que está enviando a través de fetch sea equivalente a la solicitud que envió formalmente a través de jQuery, entonces debería funcionar bien, suponiendo que el cliente: side trabajó previamente con jQuery y el lado del servidor manejó correctamente las solicitudes.