通过输入字段数据调用外部api

Question

假设“部件号”输入字段不在表单标签中。当用户输入值时，输入字段旁边的 onblur 或按钮应通过该站点的 API 查询外部站点，并返回“产品名称”值。

我有将使用 API 返回值的代码。但是如何构造输入字段以便调用 API 代码呢？

我认为我需要一个 AJAX 调用，但仍然是 Ajax 方面的菜鸟。将使用什么代码来处理输入字段中的字符串。 （请注意，没有与输入字段关联的表单标签。）（我主要使用 PHP。）

Answer 1

为了回答这个问题和随后的 cmets，从概念上讲，它将按如下方式工作。

HTML 标记：

<input type="text" id="userInput"> <!--Text input of product id from user-->
<button id="btn">Get Product Name</button> <!--Button to invoke API request-->
<p id="productName"></p> <!--Element used to display product name result from API-->

Javascript：

//Attach an event listener to the button. 
document.getElementById("btn").addEventListener("click", function(){

    //Get the id of product the user entered
    var productId = document.getElementById("userInput").value;

    //pass productId to the Amazon API

    //receive product name from API

    //Display product name received
    document.getElementById("productName").innerHTML = //The product name received from API

});