如何使用 jquery 或 java 脚本从 url(Rest API) 到 UI 获取 JSON 数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15945278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get JSON data from the url(Rest API) to UI using jquery or java script
提问by Sau
I have a URL "http://localhost:8888/api/rest/abc" which will give following json data. I wants to get this data in my UI using Jquery or java script. I'm trying this from couple of hours but I'm unable to resolve it. Please Suggest me few solutions which will help me to resolve this problem.
我有一个 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",
}
]
}
I have tried Getjson which is not working out for me this is my code below Please correct me if the code is wrong.
我试过 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>
回答by Ashish Panery
Send a ajax request to your server like this in your js and get your result in success function.
像这样在你的 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,
});
at server side send response as json type.
在服务器端以 json 类型发送响应。
And you can use jQuery.getJSONfor your application.
您可以将jQuery.getJSON用于您的应用程序。
回答by David Torres
You can use native JS so you don't have to rely on external libraries.
您可以使用原生 JS，因此您不必依赖外部库。
(I will use some ES2015 syntax, a.k.a ES6, modern javascript) What is ES2015?
（我将使用一些 ES2015 语法，又名 ES6，现代 javascript） 什么是 ES2015？
fetch('/api/rest/abc')
.then(response => response.json())
.then(data => {
// Do what you want with your data
});
You can also capture errors if any:
您还可以捕获错误（如果有）：
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);
});
By default it uses GETand you don't have to specify headers, but you can do all that if you want. For further reference: Fetch API reference
默认情况下，它使用GET并且您不必指定标题，但是如果您愿意，您可以执行所有这些操作。进一步参考：获取 API 参考
回答by Mohamed Ali
回答by Mohammed Muzammil
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`
}
}
});
