Étapes pour envoyer des données de requête ajax à l'aide de javascript natif

Remarque : l'adresse de la demande est votre propre adresse de projet, veuillez la modifier vous-même.

Il s'agit simplement d'une simple utilisation de XMLHttpRequst natif. Plus tard, je publierai comment encapsuler l'ajax natif pour implémenter l'ajax de jequery

Première étape : créer un objet xhr.

const xhr = new XMLHttpRequest();

Étape 2 : paramètres open().

xhr.open('PUT','http://118.24.84.199:8080/sm/accept/list',false);

Étape 3 : Définissez les en-têtes requis par l'interface.

xhr.setRequestHeader('token','515b8c62-ddf4-41ef-a7c8-93957e1c589e');
xhr.setRequestHeader('Accept','application/json');
xhr.setRequestHeader('Content-Type','application/json');

Étape 4 : Envoyer les données de la demande.

Remarque : les données ici doivent être traitées sous forme de fichier json et traitées à l'aide de JSON.stringify.

let data = {
                page:1,
                pageSize:10,
            };
data = JSON.stringify(data);
xhr.send(data);

Il a été envoyé ici, et vous pouvez vérifier l'état de la demande dans la requête réseau du navigateur.

Mais les données n'ont pas encore été traitées dans la page

Si les données sont une requête synchrone : traitez les données directement après l'instruction send() .

console.log(xhr.response);

Mais généralement, les demandes de données sont asynchrones, donc l'événement onreadystatechange doit être utilisé pour traiter les données.
Imprimez les données après les avoir reçues.

xhr.onreadystatechange = function(event){
    if (xhr.readyState == 4){
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            console.log(JSON.parse(xhr.response));
        } else {
            console.log("Request was unsuccessful: " + xhr.status);
        }
    }
};

Articles connexes :

Comment utiliser JS natif pour implémenter la requête GET POST d'Ajax

Exemples à expliquer l'utilisation de méthodes natives de traitement JavaScript des requêtes AJAX

Vidéos associées :

Tutoriel vidéo détaillé du principe Ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!