web-dev-qa-db-ja.com

jqueryまたはJavaスクリプトを使用してurl（Rest API）からUIにJSONデータを取得する方法

URL「http://localhost:8888/api/rest/abc "これは、次のjsonデータを提供します。JqueryまたはJavaスクリプトを使用して、このデータをUIで取得します。この問題の解決に役立ついくつかの解決策を提案してください。

{
  "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",
    }
  ]
}

私はGetjsonを試しましたが、これは私にとってはうまくいきませんこれは以下の私のコードですコードが間違っている場合は私を修正してください。

<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
11
Sau

Jsでこのようにajaxリクエストをサーバーに送信し、成功関数で結果を取得します。

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,
        });

サーバー側でjsonタイプとして応答を送信します。

また、アプリケーションに jQuery.getJSON を使用できます。

14
Ashish Panery

ネイティブJSを使用できるため、外部ライブラリに依存する必要がありません。

（ES6のいくつかの構文、別名ES6、最新のjavascriptを使用します） ES2015とは？

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

エラーがある場合はキャプチャすることもできます。

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);
    });

デフォルトではGETを使用し、ヘッダーを指定する必要はありませんが、必要に応じてすべて実行できます。詳細なリファレンス： Fetch APIリファレンス

8
David Torres

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`
                    }
                }
            });
3
Mohammed Muzammil