web-dev-qa-db-fra.com

Comment obtenir des données JSON de l'URL (API restante) vers l'interface utilisateur à l'aide de jquery ou de script Java

J'ai une URL "http://localhost:8888/api/rest/abc" qui donnera les données json suivantes. Je souhaite obtenir ces données dans mon interface utilisateur à l'aide de Jquery ou d'un script Java. J'essaye cela depuis quelques heures mais je suis incapable de le résoudre. Suggérez-moi quelques solutions qui m'aideront à résoudre ce problème.

{
  "My-user": [
    {
      "link": [
        {
          "href": "http://localhost:8888/api/rest/abc/MI/CH",
          "rel": "self",
          "type": "application/my.My.My-user+xml",
          "title": "rln"
        },
        {
          "href": "http://localhost:8888/api/rest/cabin?MI=mi&CH=ch",
          "rel": "some relation",
          "type": "application/my.My.My-cabin+xml",
          "title": "rln1"
        }
      ],
      "My-user-list": [
        {
          "name": "cuba",
          "Explanation": "bark"
        }
      ],
      "CH": "ch",
      "MI": "mi",
      "password": "xyz",
    },
    {
      "link": [
        {
          "href": "http://localhost:8888/api/rest/abc/DD/KN",
          "rel": "self",
          "type": "application/my.My.My-user+xml",
          "title": "rln"
        },
        {
          "href": "http://localhost:8888/api/rest/cabin?DD=dd&KN=kn",
          "rel": "some relation",
          "type": "application/my.My.My-cabin+xml",
          "title": "rln1"
        }
      ],
      "My-user-list": [
        {
          "name": "Cuba1",
          "Explanation": "bark1"
        }
      ],
      "KN": "kn",
      "DD": "dd",
      "password": "xyz1",
    }
  ]
}

J'ai essayé Getjson qui ne fonctionne pas pour moi c'est mon code ci-dessous S'il vous plaît corrigez-moi si le code est faux.

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script>
$.getJSON('/api/rest/abc', function(data) {
    console.log(data);
});
</script>
</head>

<body>

</body>

</html>
javascriptrestjquery
10
Sau

Envoyez une requête ajax à votre serveur comme ceci dans votre js et obtenez votre résultat en fonction de succès.

jQuery.ajax({
            url: "/rest/abc",
            type: "GET",

            contentType: 'application/json; charset=utf-8',
            success: function(resultData) {
                //here is your json.
                  // process it

            },
            error : function(jqXHR, textStatus, errorThrown) {
            },

            timeout: 120000,
        });

côté serveur envoie la réponse sous forme de type json.

Et vous pouvez utiliser jQuery.getJSON pour votre application. 

13
Ashish Panery

Vous pouvez utiliser JS natif pour ne pas avoir à vous fier à des bibliothèques externes.

(Je vais utiliser une syntaxe ES2015, a.k.a ES6, javascript moderne) Qu'est-ce que ES2015?

fetch('/api/rest/abc')
    .then(response => response.json())
    .then(data => {
        // Do what you want with your data
    });

Vous pouvez également capturer des erreurs, le cas échéant:

fetch('/api/rest/abc')
    .then(response => response.json())
    .then(data => {
        // Do what you want with your data
    })
    .catch(err => {
        console.error('An error ocurred', err);
    });

Par défaut, il utilise GET et vous n'avez pas à spécifier d'en-têtes, mais vous pouvez faire tout cela si vous le souhaitez. Pour une référence ultérieure: Fetch API reference

7
David Torres

Vous pouvez utiliser la fonction jQuery getJson :

$(function(){
    $.getJSON('/api/rest/abc', function(data) {
        console.log(data);
    });
});
5
Mohamed Ali
 jquery.ajax({
            url: `//your api url`
            type: "GET",
            dataType: "json",
            success: function(data) {
                jQuery.each(data, function(index, value) {
                        console.log(data);
                        `All you API data is here`
                    }
                }
            });
1
Mohammed Muzammil