集成VIN解码器API
我以前从未将API集成到我的任何应用程序中。我想集成一个基本的车辆识别码解码器API，这将提供基本的车辆信息后，车辆的车辆识别码被提交。我想使用NHTSA Vehicle API，因为它是免费和简单的。我最熟悉的是Javascript，他们提供了一个代码示例，我将在下面提供。如何将此API集成到我的简单HTML表单中？谢谢你的帮忙!
VIN码解码器链接：NHTSA VIN Decoder API
HTML：
<!DOCTYPE html>
<html>
<head>
<title>VIN Decoder API Test</title>
<style type="text/css">
input {width: 200px;}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<table align="center">
<tr>
<td align="center">
<input type="text" id="b12" placeholder="VIN - 17 Digits" name="name" maxlength="100">
</td>
</tr>
<tr>
<td align="center">
<button>Submit</button>
</td>
</tr>
<tr>
<td>
<textarea rows="15" cols="100" placeholder="Vehicle Data Presented Here"></textarea>
</td>
</tr>
</table>
</body>
</html>
“使用jQuery的Javascript，获取示例”：
$.ajax({
url: "https://vpic.nhtsa.dot.gov/api/vehicles/GetModelsForMakeId/440?format=json",
type: "GET",
dataType: "json",
success: function(result)
{
console.log(result);
},
error: function(xhr, ajaxOptions, thrownError)
{
console.log(xhr.status);
console.log(thrownError);
}
});
“使用jQuery的Javascript，发布示例”：
$.ajax({
url: "https://vpic.nhtsa.dot.gov/api/vehicles/DecodeVINValuesBatch/",
type: "POST",
data: { format: "json", data: "3GNDA13D76S000000;5XYKT3A12CG000000;"},
dataType: "json",
success: function(result)
{
console.log(result);
},
error: function(xhr, ajaxOptions, thrownError)
{
console.log(xhr.status);
console.log(thrownError);
}
});
回答 3
Stack Overflow用户
发布于 2018-08-08 04:40:45
HTML：
<table align="center">
<tr>
<td align="center">
<input type="text" id="b12" placeholder="Enter VINs-separated by ;" name="b12" maxlength="100"/>
</td>
</tr>
<tr>
<td align="center">
<button id="submit_btn">Submit</button>
</td>
</tr>
<tr>
<td>
<textarea rows="15" cols="100" id="results" placeholder="Vehicle Data Presented Here"></textarea>
</td>
</tr>
</table>Javascript：
$("#submit_btn").click(function () {
var val = $("#b12").val();
$.ajax({
url: "https://vpic.nhtsa.dot.gov/api/vehicles/DecodeVINValuesBatch/",
type: "POST",
data: { format: "json", data: val},
dataType: "json",
success: function(result)
{
$("#results").val(JSON.stringify(result));
},
error: function(xhr, ajaxOptions, thrownError)
{
console.log(xhr.status);
console.log(thrownError);
}
});
})我会让你把结果解析成你想要呈现的东西...
Stack Overflow用户
发布于 2018-08-08 04:42:09
这里有几个不同的东西。您应该阅读有关如何在jQuery中使用API的信息。下面是我在其他地方找到的一个快速但有效的示例：
https://www.yogihosting.com/example-jquery-ajax-call-api/
首先，将id添加到button和textarea元素中，使其易于与JavaScript交互：
<button id="btn_submit">Submit</button>
<textarea id="txt_results" rows="15" cols="100" placeholder="Vehicle Data Presented Here"></textarea>
接下来，为单击Submit按钮时添加一个事件侦听器：
document.getElementById("btn_submit").onclick = function () {
var vin;
vin = document.getElementById("b12").value;
if (vin.length === 17) {
getNHTSADataByVIN(vin);
}
};现在是有趣的部分。在jQuery的AJAX调用中，您可以决定如何处理从success参数中的调用中接收到的数据。在该接口的示例用法中，一旦返回result参数，您就可以对该参数执行任何操作。下面是一个函数，它将把result对象传递给一个函数，该函数将显示(我们将要编写的)结果：
function getNHTSADataByVIN (param_vin) {
$.ajax({
url: "https://vpic.nhtsa.dot.gov/api/vehicles/DecodeVINValuesBatch/",
type: "POST",
data: { format: "json", data: param_vin },
dataType: "json",
success: function(result)
{
console.log(result);
displayNHTSAResults(result);
},
error: function(xhr, ajaxOptions, thrownError)
{
console.log(xhr.status);
console.log(thrownError);
}
});
};最后，我们创建一个函数，该函数接受result对象内部的属性，如果属性不为空，则将其写出到文本区域：
function displayNHTSAResults (param_data) {
var output_text = "";
for (var i = 0; i < param_data.Results.length; i++) {
var result = param_data.Results[i];
for (var prop in result) {
if (result.hasOwnProperty(prop) && result[prop] !== "") {
output_text += prop + ": " + result[prop] + "\n";
}
}
}
document.getElementById("txt_results").value = output_text;
};当然，有很多方法可以做到这一点，但希望这可以作为API用法的一个很好的简单演示。
Stack Overflow用户
发布于 2020-11-11 10:09:06
async function CheckVin(vin) {
var response = await fetch(`https://vpic.nhtsa.dot.gov/api/vehicles/decodevin/${vin}?format=json`);
let result = await response.json();
result = result.Results.reduce((accumulator, crr) => {
if (crr.Value && crr.Value != 'Not Applicable') {
accumulator[crr.VariableId] = {
variable: crr.Variable,
value: crr.Value
}
}
return accumulator;
}, {})
if(result['143'].value !== '0'){
throw result['191'].value;
}
return result;
}https://stackoverflow.com/questions/51734389
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号