我目前有一个输入搜索栏，其中包含一个提交按钮和将显示我想要的 API 数据的代码。但是，在 API 的 URL 中，它将位置设置为邮政编码“FK1 5LD”，您可以看到“area=FK1%205LD”部分。数据的显示和格式化方式非常适合我。但我希望能够在输入搜索栏中输入邮政编码“FK1 5LD”，当我单击提交按钮时，它会显示我已经编码的 API 数据。
谢谢!
搜索栏和按钮 HTML
<input name="search" placeholder="Search.." type="text"><button>Search</button>
Javascript显示API信息
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<script>
$(function() {
$.ajax({
url: "http://api.lmiforall.org.uk/api/v1/census/jobs_breakdown?area=FK1%205LD",
method: "GET",
dataType: "json",
success: function(data) {
var str = "";
for(var i= 0; i < data.jobsBreakdown.length; i++){
str +='Job Title : '+data.jobsBreakdown[i].description+' <br> Total Number of People Engaged in Occupency : '+data.jobsBreakdown[i].value+' <br> Percentage of Occupancies in Area : '+data.jobsBreakdown[i].percentage.toPrecision(2)+'% <br><br>';
}
$("body").html(str);
}
});
});
</script>
最佳答案
可能没有捕获重点 - 但您只想调出当前在搜索字段中输入的内容的数据，对吗？如果是这样，这应该可以做到 - 只需要进行一些元素引用并公开更新的 url 末尾。
<input id="mySearchField" name="search" placeholder="Search.." type="text">
<button id="mySearchButton">Search</button>
<div id="myContentArea></div>
<script>
$(function() {
var _myContentArea = document.getElementById("myContentArea");
var _mySearchButton = document.getElementById("mySearchButton");
_mySearchButton.onclick = getData;
function getData(){
var _mySearchField = document.getElementById("mySearchField");
$.ajax({
url: "http://api.lmiforall.org.uk/api/v1/census/jobs_breakdown?area="+_mySearchField.value,
method: "GET",
dataType: "json",
success: function(data) {
var str = "";
for(var i= 0; i < data.jobsBreakdown.length; i++){
str +='Job Title : '+data.jobsBreakdown[i].description+' <br> Total Number of People Engaged in Occupency : '+data.jobsBreakdown[i].value+' <br> Percentage of Occupancies in Area : '+data.jobsBreakdown[i].percentage.toPrecision(2)+'% <br><br>';
}
_myContentArea.innerHTML = str;
}
});
}
});
</script>
关于javascript - 如何通过在搜索栏中输入邮政编码来显示 API 数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58699897/