Javascript 集成VIN解码器API

我以前从未将API集成到我的任何应用程序中。我想集成一个基本的VIN解码器API，它将在提交车辆的VIN后提供基本的车辆信息。我想使用NHTSA车辆API，因为它是免费和简单的。我最熟悉Javascript，它们提供了一个代码示例，我将在下面提供。如何将此API集成到简单的HTML表单中？谢谢你的帮助

链接到VIN解码器：

HTML:

VIN解码器API测试
输入{宽度：200px；}
提交

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>

我将由您将结果解析为您想要呈现的内容…

HTML:

---

我将让您将结果解析为您想要呈现的内容…

这里有一些不同的内容。您应该了解如何使用jQuery使用API。下面是我在别处找到的一个快速但有效的例子：

首先，通过在

按钮

和

文本区域

元素中添加

id

，将HTML设置为易于与JavaScript交互：

提交

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

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

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

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

现在是有趣的部分。在jQuery的AJAX调用中，您可以在

success

参数中决定从调用中接收到的数据会发生什么。在API的示例用法中，只要返回

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

函数显示NHTSA结果（参数数据）{
var输出_text=“”；
对于（var i=0；i

---

当然，有很多方法可以做到这一点，但希望这可以作为API使用的简单演示。

这里有一些不同的东西。您应该了解如何使用jQuery使用API。下面是我在别处找到的一个快速但有效的例子：

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

首先，通过在

按钮

和

文本区域

元素中添加

id

，将HTML设置为易于与JavaScript交互：

提交

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

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

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

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

现在是有趣的部分。在jQuery的AJAX调用中，您可以在

success

参数中决定从调用中接收到的数据会发生什么。在API的示例用法中，只要返回

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

函数显示NHTSA结果（参数数据）{
var输出_text=“”；
对于（var i=0；i

---

当然，有很多方法可以做到这一点，但希望这可以作为API使用的简单演示。

您必须在表单提交时，从表单输入中获取值，并将其放入“Post”示例的数据部分。该示例包括两个VIN编号，但您只需要一个。请确保仍然在VIN输入后附加分号。GET示例是错误的示例，您没有获得汽车列表的品牌和型号信息，而是询问有关特定VIN的信息。@mix3d您能对此进行扩展吗？试图找到答案，而不是直接解决它。您必须在表单上提交，从表单输入中获取值，并将其放入“Post”示例的数据部分。该示例包括两个VIN编号，但您只需要一个。请确保仍然在VIN输入后附加分号。GET示例是错误的示例，您没有获得汽车列表的品牌和型号信息，而是询问有关特定VIN的信息。@mix3d您能对此进行扩展吗？它试图找到答案，而不是直接解决问题。

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