TL: DR ci-dessous

Je suis donc actuellement sur l'un des didacticiels Spring en créant une application API REST. Dans le back-end, il y a un service de vérification d'e-mail qui obtient un jeton pour vérifier et après vérification, il donne une réponse simple avec le statut "SUCCESS" ou "ERROR" - tout cela fonctionne très bien. Au début, il y a une simple page HTML avec un script JS qui suppose de vérifier cet état de réponse et, en fonction de sa valeur, doit afficher un message différent dans le corps HTML. Le problème est que JS ne peut pas lire la valeur de la réponse (j'appuie sur) car peu importe ce qu'il me donne toujours l'option "else". Je n'ai aucune connaissance de JS, j'ai fait de mon mieux pour le comprendre par moi-même mais je n'y suis pas parvenu.

TL: DR Le script JS ne peut pas lire la valeur "operationStatus" de la réponse.

Script JS:

<script language="JavaScript">
        $(document).ready(function () {
            var urlParams = new URLSearchParams(location.search);
            if (urlParams.has('token')){
                verifyToken(urlParams.get('token'));
            }

            function verifyToken(tokenValue) {
                $.get('http://localhost:8080/mobile-app-ws/users/email-verification', {token: tokenValue})
                    .done(function (response) {

                        if (response["operationStatus"] === "SUCCESS"){
                            $("#not-successful-result").attr("style", "display: none !important;");
                            $("#unknown-result").attr("style", "display: none !important;");
                            $("#successful-result").attr("style", "display: block !important;");
                        }else if (response["operationStatus"] === "ERROR"){
                            $("#successful-result").attr("style", "display: none !important;");
                            $("#unknown-result").attr("style", "display: none !important;");
                            $("#not-successful-result").attr("style", "display: block !important;");
                        }else{
                            console.log(response);
                            $("#successful-result").attr("style", "display: none !important;");
                            $("#not-successful-result").attr("style", "display: none !important;");
                            $("#unknown-result").attr("style", "display: block !important;");
                        }

                })
            }
        })
    </script>

Corps HTML:

<body>
    <div id="successful-result" style="display:none">Successful verification</div>
    <div id="not-successful-result" style="display:none">Verification link has expired</div>
    <div id="unknown-result" style="display:none">UNKNOWN</div>
</body>

Classe de réponse JAVA (RequestOperationStatus et RequestOperationName ne sont que de simples énumérations)

public class OperationStatusModel {

    private RequestOperationStatus operationStatus;
    private RequestOperationName operationName;

}

Exemple de réponse de Postman en JSON:

{
    "operationStatus": "ERROR",
    "operationName": "VERIFY_EMAIL"
}

Et console dans le navigateur: https://i.imgur.com/FmBm84j.png

0
EPP 23 avril 2020 à 16:47

2 réponses

Meilleure réponse

Utilisez $.getJSON au lieu de $.get sinon vous devez passer Accept: application/json.

$.getJSON('http://localhost:8080/mobile-app-ws/users/email-verification', {token: tokenValue})
    .done(function (response) {
        // ...
    });
3
3limin4t0r 23 avril 2020 à 14:07

Changement

if (response["operationStatus"] === "SUCCESS")
...
}else if (response["operationStatus"] === "ERROR"){

À

if (response.OperationStatusModel.operationStatus === "SUCCESS")
...
}else if (response.OperationStatusModel.operationStatus === "ERROR"){

Si cela ne fonctionne pas. Regardez ce qui est en réponse. Essaye ça. Avant la ligne

 if (response["operationStatus"] === "SUCCESS"){

Mettre un console.log, comme ça

console.log(response);
-1
sawili1495 23 avril 2020 à 13:52