¿Cómo escribo esta llamada de paz de Ajax que está escrita en jQuery, completamente en JavaScript vainilla

Lo que debe convertirse en JavaScript de vainilla

$.ajax({
	type: "DELETE",
url: "/users/delete/" + $(".deleteUser").data('id');
}}

Lo que creo que debería ser, pero el registro de la consola me dio el siguiente mensaje de error: la solicitud no está definida. Y me temo que no recogería la identificación.

request.open("DELETE", "/users/delete/" + this.dataSet('id')); 
2
Frontend employee 27 oct. 2017 a las 22:43

3 respuestas

La mejor respuesta

No puedes obtener más vainilla que la buena xmlhttprequest.

var xhr1 = new XMLHttpRequest();
xhr1.open('DELETE', "http://127.0.0.1:80/users/delete/", true);
xhr1.onreadystatechange = function() {
    if (this.status == 200 && this.readyState == 4) {

        dostuff = this.responseText;
  };//end onreadystate
 xhr1.send();

Disfrutar.

3
Hunter 27 oct. 2017 a las 20:00

request es un módulo de nodo, no está disponible en el navegador (aunque hay una bifurcación para el navegador, aún así no es vanilla JS, sino una biblioteca).

Si está de acuerdo con no admitir IE (solo IE, edge debería estar bien), puede usar la API fetch:

fetch("/users/delete/" + $(".deleteUser").data('id'), {
    method: "DELETE",
}}.then(function (response) {
    console.log(response);
});

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Por cierto, supongo que también desea deshacerse de la llamada $.data, esta es la versión JS de vainilla:

var id = document.querySelector('.deleteUser').getAttribute('data-id');
1
Martin Adámek 27 oct. 2017 a las 19:53

Simplemente puede usar la nueva API de recuperación:

Fetch (url, {método: 'DELETE'})

    .then((res)=>{
        res.json()
            window.location.href = '/'
        }
    );
1
Ayman THEE 9 nov. 2018 a las 11:38