如何使用 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