JQuery GET 响应 JSON。 Select 特定对象
JQuery GET with JSON response. Select specific objects
我正在开发一个简单的网络应用程序。这将使客户端输入车牌,然后连接到基于 Socrata 的 OpenData API,其中包含我国所有注册汽车的记录。
使用车牌,它必须找到正确的车,并显示具体信息。显示的信息类型会有所不同,因为我打算在几个不同的网页上使用这个应用程序,但作为起点,我想显示汽车的品牌和型号。这些在数组中列为
"merk" : "KIA"
"handelsbenaming" : "PICANTO"
其中 'Merk' 是 brand/manufacturer,'handelsbenaming' 是模型。
我对 javascript 不是很有经验,对 JQuery 完全陌生,但我设法想出了这个:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
var kenteken = "1KBB00";
$(document).ready(function(){
$("button").click(function(){
$.get("https://opendata.rdw.nl/resource/m9d7-ebf2.json",{kenteken: kenteken},function(data, status){
alert("Data: " + data + " Status: " + status);});
});
});
</script>
</head>
<body>
<button>Click</button>
</body>
如您所见,JQuery 是通过按下按钮触发的。稍后我将制作一个输入字段以获取车牌号,但出于测试目的,我只是将变量 "kenteken" 定义为真实车牌。同样出于测试目的,我想 return 警告框中的响应。
经测试,Firefox 中的控制台未显示任何错误。我还可以看到发出了 GET 请求,并且 JSON 数组被 returned。但是,我无法将数组写入文档或警告框。目前,警报显示:
Data: [object Object] Status: success
然而,据我所知,'Data' 应该显示整个 JSON 数组,该数组由 GET 请求return编辑
我使用了 Google,多次阅读了 API 附带的文档,我已经阅读了很多关于 SO 的帖子,我已经记不清了,但我没有明白了。
当您取回数据时,它会以字符串的形式出现。
使用 JSON.Parse(data) 将其变回 JSON 对象,您应该可以使其看起来正确。在警报之前放置一个断点,然后您可以检查返回的内容以及 json 方法的作用。
$.get("https://opendata.rdw.nl/resource/m9d7-ebf2.json",{kenteken: kenteken},function(data, status){
debugger;
var jsonData = JSON.Parse(data);
alert("Data: " + jsonData + " Status: " + status);});
});
响应不是单个对象,它是一个对象数组,因此您需要为它们编制索引以访问属性。我在下面展示了如何访问第一个,但在你的真实代码中你可能会循环。
$.getJSON("https://opendata.rdw.nl/resource/m9d7-ebf2.json",{kenteken: kenteken},function(data, status){
alert("Merk: " + data[0].merk + " Handelsbenaming: " + data[0]. handelsbenaming + " Status: " + status);});
});
我正在开发一个简单的网络应用程序。这将使客户端输入车牌,然后连接到基于 Socrata 的 OpenData API,其中包含我国所有注册汽车的记录。
使用车牌,它必须找到正确的车,并显示具体信息。显示的信息类型会有所不同,因为我打算在几个不同的网页上使用这个应用程序,但作为起点,我想显示汽车的品牌和型号。这些在数组中列为
"merk" : "KIA"
"handelsbenaming" : "PICANTO"
其中 'Merk' 是 brand/manufacturer,'handelsbenaming' 是模型。
我对 javascript 不是很有经验,对 JQuery 完全陌生,但我设法想出了这个:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
var kenteken = "1KBB00";
$(document).ready(function(){
$("button").click(function(){
$.get("https://opendata.rdw.nl/resource/m9d7-ebf2.json",{kenteken: kenteken},function(data, status){
alert("Data: " + data + " Status: " + status);});
});
});
</script>
</head>
<body>
<button>Click</button>
</body>
如您所见,JQuery 是通过按下按钮触发的。稍后我将制作一个输入字段以获取车牌号,但出于测试目的,我只是将变量 "kenteken" 定义为真实车牌。同样出于测试目的,我想 return 警告框中的响应。
经测试,Firefox 中的控制台未显示任何错误。我还可以看到发出了 GET 请求,并且 JSON 数组被 returned。但是,我无法将数组写入文档或警告框。目前,警报显示:
Data: [object Object] Status: success
然而,据我所知,'Data' 应该显示整个 JSON 数组,该数组由 GET 请求return编辑
我使用了 Google,多次阅读了 API 附带的文档,我已经阅读了很多关于 SO 的帖子,我已经记不清了,但我没有明白了。
当您取回数据时,它会以字符串的形式出现。
使用 JSON.Parse(data) 将其变回 JSON 对象,您应该可以使其看起来正确。在警报之前放置一个断点,然后您可以检查返回的内容以及 json 方法的作用。
$.get("https://opendata.rdw.nl/resource/m9d7-ebf2.json",{kenteken: kenteken},function(data, status){
debugger;
var jsonData = JSON.Parse(data);
alert("Data: " + jsonData + " Status: " + status);});
});
响应不是单个对象,它是一个对象数组,因此您需要为它们编制索引以访问属性。我在下面展示了如何访问第一个,但在你的真实代码中你可能会循环。
$.getJSON("https://opendata.rdw.nl/resource/m9d7-ebf2.json",{kenteken: kenteken},function(data, status){
alert("Merk: " + data[0].merk + " Handelsbenaming: " + data[0]. handelsbenaming + " Status: " + status);});
});