Javascript API集成不起作用_Javascript_Jquery_Html_Api

Javascript API集成不起作用

javascript jquery html api

Javascript API集成不起作用,javascript,jquery,html,api,Javascript,Jquery,Html,Api,我是集成API的新手。我将一个简单的车辆VIN解码器API集成到表单中。每当在第一次输入中输入车辆的VIN并选择提交时，有关车辆的数据应显示在文本区域中。该API来自NHTSA。以下是它的链接：这是我一直在测试的VIN:WDBSK79F85F096997 它属于2005年的梅赛德斯-奔驰SL65 这是我的密码： VIN解码器API测试输入{宽度：200px；} $（“#提交”_btn”）。单击（函数（）{ var val=$（“#b12”）.val（）； $.ajax({ url:“ht

我是集成API的新手。我将一个简单的车辆VIN解码器API集成到表单中。每当在第一次输入中输入车辆的VIN并选择提交时，有关车辆的数据应显示在文本区域中。该API来自NHTSA。以下是它的链接：

这是我一直在测试的VIN:WDBSK79F85F096997

它属于2005年的梅赛德斯-奔驰SL65

这是我的密码：


VIN解码器API测试
输入{宽度：200px；}
$（“#提交”_btn”）。单击（函数（）{
var val=$（“#b12”）.val（）；
$.ajax({
url:“https://vpic.nhtsa.dot.gov/api/vehicles/DecodeVINValuesBatch/",
类型：“POST”，
数据：{格式：“json”，数据：val}，
数据类型：“json”，
成功：功能（结果）
{
$（“#results”）.val（JSON.stringify（result））；
},
错误：函数（xhr、ajaxOptions、thrownError）
{
控制台日志（xhr.status）；
控制台日志（thrownError）；
}
});
})
提交

当您将脚本放在

head

部分中，并且脚本依赖于

DOM

元素时，您必须确保所有

DOM

元素都已加载。有多种方法可以做到这一点，其中之一是用

$（document.ready（function（）{/*您的代码在这里*/}）；


VIN解码器API测试
输入{宽度：200px；}
$（文档）.ready（函数（）{
$（“#提交”_btn”）。单击（函数（）{
var val=$（“#b12”）.val（）；
$.ajax({
url:“https://vpic.nhtsa.dot.gov/api/vehicles/DecodeVINValuesBatch/",
类型：“POST”，
数据：{格式：“json”，数据：val}，
数据类型：“json”，
成功：功能（结果）
{
$（“#results”）.val（JSON.stringify（result））；
},
错误：函数（xhr、ajaxOptions、thrownError）
{
控制台日志（xhr.status）；
控制台日志（thrownError）；
}
});
})
});
提交

您可以将脚本放在页面底部

<!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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

  <table align="center">
      <tr>
          <td align="center">
              <input type="text" id="b12" placeholder="Enter VIN" 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>

<script>
  $("#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);
        }
    });
  });
</script>
</body>
</html>


VIN解码器API测试
输入{宽度：200px；}
提交
$（“#提交”_btn”）。单击（函数（）{
var val=$（“#b12”）.val（）；
$.ajax({
url:“https://vpic.nhtsa.dot.gov/api/vehicles/DecodeVINValuesBatch/",
类型：“POST”，
数据：{格式：“json”，数据：val}，
数据类型：“json”，
成功：功能（结果）
{
$（“#results”）.val（JSON.stringify（result））；
},
错误：函数（xhr、ajaxOptions、thrownError）
{
控制台日志（xhr.status）；
控制台日志（thrownError）；
}
});
});

您需要将单击侦听器包装在一个

$（文档）.ready（function（）{}）；

中。在初始化脚本之前，将加载该页面。您可以在此处阅读更多信息