6
votes

Angular 7 HTTP GET envoie un objet JSON en tant que paramètre

J'essaye d'envoyer une structure json à un service de repos depuis angular en faisant quelque chose comme ceci

encodeURIComponent(JSON.stringify(dataPrincipalBlnc)

Le résultat de la requête devrait ressembler à ceci:

https://example.com/test?authenticationType=cookie&requestData=%7B%test%22:%7B%22test1%22:%7B%22test2%22:%220317 % 22,% 22test3% 22:% 7B% 22IDIOMA_ISO% 22:% 22 + en% 22,% 22DIALECTO_ISO% 22:% 22US% 22% 7D,% 22channel% 22:% 22INT% 22% 7D,% 22input% 22 :% 7B% 22test5% 22:% 7B% 22test5var1% 22:% 7B% 22test5var2% 22:% 220317% 22,% 22test5var3% 22:% 229556% 22% 7D,% 22test5var4% 22:% 22123% 22,% 22test5var5% 22:% 220000986% 22% 7D% 7D% 7D% 7D

Mais c'est cur envoyé récemment comme:

https://example.com / test? requestData =% 5Bobject% 20Object% 5D & authenticationType = cookie

Des idées comment puis-je envoyer l'objet json en tant que première requête? Dois-je convertir manuellement le json dans un format uri valide?

Dans angularJS fonctionne très bien simplement en utilisant le code suivant:

var data = {
      "test1": {
        "test2": {
          "test3": "0317",
          "test4": {
            "IDIOMA_ISO": " en",
            "DIALECTO_ISO": "US"
          },
          "channel": "INT"
        },
        "input": {
          "test5": test5var
        }
      }
};
$http.get(url, {
      params: {
        authenticationType: authType,
        requestData: data
      }
    }).then(success(deferred), error(deferred));

J'ai aussi essayé d'utiliser le code suivant mais le résultat ajoute plus de caractères et le backend est défaillant car il indique que le JSON n'est pas dans un format valide:

  let test5var = {
                    "test5var1": {
                        "test5var2": "0317",
                        "test5var3": "9556"
                    },
                    "test5var4": "123",
                    "test5var": "0000046"
                }
let dataPrincipalBlnc = {"test": {"test1": {"test2": "0317","test3": {"IDIOMA_ISO": " en","DIALECTO_ISO": "US"},"channel": "INT"},"input": {"test5": test5var}}};

let headers = new HttpHeaders();
    headers.append('Content-Type', 'application/json');

    let params = new HttpParams().set("requestData", dataPrincipalBlnc.toString()).set("authenticationType", this.authType);


    return this.http.get(this.url, {params: params}); 

? requestData =% 257B% 2522test% 2522% 253A% 257B% 2522test1% 2522% 253A% 257B% 2522test2% 2522% 253A% 25220317% 2522% 252C% 2522test3% 2522% 253A% 257B% 2522IDIOMA_ISO% 2522% 253Aen% 2522% 2522% 2522% 2522% 2522DIALECTO_ISO% 2522% 253A% 2522US% 2522% 257D% 252C% 2522canal% 2522% 253A% 2522INT% 2522% 257D% 252C% 2522input% 2522% 253A% 257B% 2522test5% 2522% 253A% 257B1% 2522test5% 2522% 253A% 257B1% 2522test 257B% 2522test5var2% 2522% 253A% 25220317% 2522% 252C% 2522test5var4% 2522% 253A% 25229556% 2522% 257D% 252C% 2522test5var4% 2522% 253A% 2522123% 2522% 252C% 2522test5var4% 2522% 253A% 25229556% 2522% 257D% 252C% 2522test5var4% 2522% 253A% 2522123% 2522% 252C% 2522% 2522% Test5 257D% 257D% 257D% 257D & authenticationType = cookie

Merci Cordialement


0 commentaires

3 Réponses :


6
votes

Tout objet JSON transmis au service doit être envoyé via le corps de la réponse. Vous ne devez ajouter des paramètres de chaîne valides que dans l'URL.

Il existe également une limitation de la taille des URL pour la plupart des navigateurs, donc un objet plus gros peut vous conduire au problème des URL longues. / p>

Vous voyez le requestData =% 5Bobject% 20Object% 5D & authenticationType = cookie car il ne peut pas mettre un objet JSON dans l'URL chaîne de requête .

Certains caractères ne peuvent pas faire partie d'une URL (par exemple, l'espace) et certains autres caractères ont une signification particulière dans une URL: par exemple, le caractère # peut être utilisé pour spécifier une sous-section (ou un fragment) d'un document; le caractère = est utilisé pour séparer un nom d'une valeur. Une chaîne de requête peut avoir besoin d'être convertie pour satisfaire ces contraintes. Cela peut être fait en utilisant un schéma appelé encodage d'URL .

Utilisez JSON.stringify lorsque vous avez un objet JavaScript et que vous souhaitez le convertir en une chaîne (contenant un texte JSON). C'est ce qu'on appelle la sérialisation.

Indépendamment de JSON:

Utilisez encodeURIComponent chaque fois que vous souhaitez envoyer des caractères "problématiques" dans l'URL tels que & ,% etc. Le contraire est decodeURIComponent .

Je préférerais quand même envoyer l'objet dans le corps de la requête.

Donc, dans votre cas, utilisez:

 let params = new HttpParams()
                .set("requestData", encodeURIComponent(JSON.stringify(dataPrincipalBlnc)))
                .set("authenticationType", this.authType);


2 commentaires

Comme il s'agit d'une méthode get, je ne peux pas envoyer les informations dans le corps et le backend est prêt à recevoir le JSON en tant que paramètre, j'ai essayé ce que vous avez dit mais le résultat est d'ajouter plus de caractères et cela rend le backend falis en disant l'objet JSON est invalide. J'ai édité la question en ajoutant ces informations. Merci


Oui, vous pouvez envoyer un corps de requête avec GET mais cela ne devrait pas avoir de sens. Si vous lui donnez un sens en l'analysant sur le serveur et en modifiant votre réponse en fonction de son contenu, vous ignorez cette recommandation dans la spécification HTTP / 1.1, section 4.3:



2
votes

En ajoutant à la réponse @nircraft (qui est très élaborée et bonne), cette implémentation semble faire l'affaire pour vous,

let test5var = {
                "test5var1": {
                    "test5var2": "0317",
                    "test5var3": "9556"
                },
                "test5var4": "123",
                "test5var": "0000046"
            }
let dataPrincipalBlnc = '{"test": {"test1": {"test2": "0317","test3": {"IDIOMA_ISO": " en","DIALECTO_ISO": "US"},"channel": "INT"},"input": {"test5": test5var}}}';

let headers = new HttpHeaders();
headers.append('Content-Type', 'application/json');

let params = new HttpParams().set("requestData", encodeURIComponent(dataPrincipalBlnc)).set("authenticationType", this.authType);


return this.http.get(this.url, {params: params}); 

En Javascript, vous pouvez essentiellement insérer une chaîne dans ' ' ou "".

Lorsque vous n'incluez pas spécifiquement la chaîne, je pense qu'elle est entourée de "" , ce qui rend votre réponse JSON a besoin de caractères d'échappement lorsque vous utilisez stringify.

Enfermant la chaîne comme celle-ci, vous vous assurerez que les guillemets doubles garantiront qu'elle n'aura pas besoin de caractères d'échappement.

Faites-moi savoir si vous avez des questions.


1 commentaires

Je viens de le faire fonctionner en définissant les données en tant qu'objet et en utilisant plus tard juste le JSON.stringify



0
votes

Je viens de résoudre le problème en définissant les données en tant qu'objet et en utilisant uniquement JSON.stringify:

let dataPrincipalBlnc: object;

let dataPrincipalBlnc = {"test": {"test1": {"test2": "0317","test3": {"IDIOMA_ISO": " en","DIALECTO_ISO": "US"},"channel": "INT"},"input": {"test5": test5var}}};

let params = new HttpParams().set("requestData", JSON.stringify(dataPrincipalBlnc)).set("authenticationType", this.authType);

Merci pour votre aide Cordialement


0 commentaires