如何使用jQuery或Java腳本從URL（Rest API）到UI獲取JSON數據

我有一個URL「http://localhost:8888/api/rest/abc」，它將提供以下json數據。我想使用Jquery或java腳本在我的UI中獲取這些數據。我從幾個小時嘗試這個，但我無法解決它。請建議我幾個解決方案，這將幫助我解決這個問題。如何使用jQuery或Java腳本從URL（Rest API）到UI獲取JSON數據

{ 
    "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>

來源

2013-04-11 Sau

這是預期的輸出，顯示我們的代碼。你試過什麼了？ – 2013-04-11 09:35:51

您好無此URL是通過Node.js生成並啓動服務器後如果我運行服務器localhost：8888/api/rest/abc後打開URL，那麼它將提供以下json，但我希望該json在用戶界面 – Sau 2013-04-11 09:58:34

發送Ajax請求到服務器像這樣在你的JS，讓你的結果成功的功能。

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作爲您的應用程序。

來源

2013-04-11 09:38:28

* async：false *爲什麼在地球上？ – Tommi 2013-04-11 09:42:01

我使用GET方法請你引導我使用GET方法 – Sau 2013-04-11 10:19:39

@Sau編輯了我的答案，並點擊接受，如果你接受這個答案 – 2013-04-25 11:21:03

您可以使用我們的jQuery功能getJson：

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

來源

2013-04-11 09:38:05

我試過了getJson並在我的問題上面更新了代碼，但沒有爲我解決問題，請你檢查一下我的代碼，告訴我我犯了什麼錯誤。 – Sau 2013-04-11 10:10:59

什麼是您的Web服務GET或POST的方法？ – 2013-04-11 10:12:12

方法是GET GET – Sau 2013-04-11 10:15:37

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

（我會使用一些ES2015語法，又名ES6，現代的JavaScript） What is 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 reference

來源

2017-04-07 13:20:14

如何使用jQuery或Java腳本從URL（Rest API）到UI獲取JSON數據

回答

相關問題