Question

我以前从未将API集成到我的任何应用程序中。我想集成一个基本的VIN解码器API，该API将在提交车辆的VIN后提供基本的车辆信息。我想使用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);
	}
});

Answer 1

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);
        }
    });
})

我将由您决定将结果解析为您要呈现的内容...

Answer 2

这里有一些不同的东西。您应该阅读有关如何通过jQuery使用API的内容。这是我在其他地方找到的快速但有效的示例：

https://www.yogihosting.com/example-jquery-ajax-call-api/

首先，通过在id和button元素中添加textarea，将HTML设置为易于与JavaScript交互：

<button id="btn_submit">Submit</button>

<textarea id="txt_results" rows="15" cols="100" placeholder="Vehicle Data Presented Here"></textarea>

接下来，为单击“提交”按钮添加事件侦听器：

document.getElementById("btn_submit").onclick = function () {
  var vin;

  vin = document.getElementById("b12").value;

  if (vin.length === 17) {
    getNHTSADataByVIN(vin);
  }
};

现在有趣的部分。在jQuery的AJAX调用中，您可以决定从success参数中的调用中收到的数据将如何处理。在API的示例用法中，一旦返回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);
    }
  });
};

最后，我们创建一个函数，该函数将结果对象内部的属性，如果属性不为空，则将其写到文本区域：

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的用法。

Answer 3

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;
}

集成VIN解码器API

3 个答案: