API集成不起作用
API集成不起作用
提问于 2018-08-08 05:54:38
我是一个集成API的新手。我将一个简单的车辆VIN解码器API集成到一个表单中。每当在第一个输入中输入车辆的VIN并选择提交时，有关该车辆的数据应显示在文本区域中。本API来自NHTSA。下面是它的链接：VIN Decoder
这是我一直在测试的车辆识别码: WDBSK79F85F096997
它属于一辆2005款梅赛德斯-奔驰SL65
下面是我的代码：
<!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>
<script type="text/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);
}
});
})
</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>
</body>
</html>
任何关于为什么在点击submit时没有数据显示的想法。
回答 3
Stack Overflow用户
发布于 2018-08-08 06:04:18
当您将脚本放在head部件中，并且脚本依赖于DOM元素时，您必须确保已经加载了所有DOM元素。有多种方法可以做到这一点，其中之一就是在脚本周围使用$(document.ready(function() { /*Your code is here*/ });
<!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>
<script>
$(document).ready(function() {
$("#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>
</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>
</body>
</html>
Stack Overflow用户
发布于 2018-08-08 06:07:33
你可以把你的脚本放在页面的底部
<!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>Stack Overflow用户
发布于 2018-08-08 06:12:21
您需要将单击侦听器包装在$(document).ready(function(){});中。页面是在脚本初始化之前加载的。你可以在这里阅读更多信息http://learn.jquery.com/using-jquery-core/document-ready/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51735964
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号