如何使用 jQuery 或純 JavaScript 從 URL (REST API) 到 UI 獲取 JSON 數據？

Question

我有一個 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>

Answer 1

像這樣在你的 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用於您的應用程序。

Answer 2

您可以使用原生 JS，因此您不必依賴外部庫。

（我將使用一些 ES2015 語法，又名 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並且您不必指定標頭，但是如果您願意，您可以執行所有這些操作。 進一步參考：獲取 API 參考

Answer 3

您可以使用我們的 jquery 函數getJson ：

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

Answer 4

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

如何使用 jQuery 或純 JavaScript 從 URL (REST API) 到 UI 獲取 JSON 數據？

問題描述

4 個解決方案

解決方案1
14 已采納 2013-04-11 09:38:28

解決方案2
10 2017-04-07 13:20:14

解決方案3
6 2013-04-11 09:38:05

解決方案4
3 2018-12-14 09:20:38

如何使用 jQuery 或純 JavaScript 從 URL (REST API) 到 UI 獲取 JSON 數據？

問題描述

4 個解決方案

解決方案1 14 已采納 2013-04-11 09:38:28

解決方案2 10 2017-04-07 13:20:14

解決方案3 6 2013-04-11 09:38:05

解決方案4 3 2018-12-14 09:20:38

解決方案1
14 已采納 2013-04-11 09:38:28

解決方案2
10 2017-04-07 13:20:14

解決方案3
6 2013-04-11 09:38:05

解決方案4
3 2018-12-14 09:20:38