使用 API 的用户输入答案

【问题标题】：User Input with API使用 API 的用户输入
【发布时间】：2019-12-13 03:05:02
【问题描述】：

我有一个表单，用户可以在其中输入纬度和经度（坐标）。我想要做的是根据以下 REST API 显示信息： https://rest.soilgrids.org/query.html

这就是我创建的。

<p>
  Latitude : <input id='lat'/> <br/>
  Longitude: <input id='lon'/> <br/>
  <button id='submit'>Submit<button/>
 <p/>

那么我如何提取输入并使其显示基于 API 的可用信息。我是这方面的初学者，所以需要 JS 的帮助

【问题讨论】：

我需要更多信息，我什至尝试点击该 API，但它只是返回错误请求，所以我假设它需要凭据或其他东西，无论如何我认为这个问题有点宽泛，它会是如果您解释了更多您想做的事情，甚至有示例和代码，将会很有帮助。
哦，此外，我并不是要暗示您应该共享 API 密钥或任何东西，永远不要这样做。代码示例将仅限于您需要帮助的部分，并且与您遇到的问题相关。
我认为您不需要任何 API 密钥。例如rest.soilgrids.org/query?lon=1&lat=2
谢谢你的建议，我已经更新了这个问题，API 也可以在给定的链接上找到。

标签： javascript jquery json api

【解决方案1】：

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>

    </style>
    <title>Untitled Document</title>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <label>Latitute</label>
                <input type="number" class="form-control" id="lat">
            </div>
            <div class="col-sm-6">
                <label>longitute</label>
                <input type="number" class="form-control" id="long">
            </div>
            <div class="col-sm-3">

                    <input type="button" class="btn btn-primary" id="search" value="get Info">
                </div>
        </div>

    </div>

    <script>
        $(document).ready(function(){
            $("#search").click(function(){
                let lat = $("#lat").val();
                let long = $("#long").val();
                if(lat == "" || long==""){
                    alert("please enter lat and long to get info");
                    return;
                }
                else{
                    $.ajax({
                        type:"GET",
                        url:`https://rest.soilgrids.org/query?lon=${long}&lat=${lat}`,
                        dataType: "json",
                        success:function(response){
                                console.log(response);
                        },
                        error:function(jqXHR, exception){
                            console.log("error");
                        }
                    })
                }
            })
        })
    </script>
    </body>
</html>

试试看

【讨论】：

【解决方案2】：

您需要执行 Ajax 调用才能从 API 获取数据。

假设您的脚本中有 jQuery，示例如下：


// The code will only run on form submit
$("#form").on("submit", (evt) => {
    evt.preventDefault();
    // Abbreviate on how you get the longitude / latitude 
    const longitude = ...
    const latitude = ...
    const url = "https://rest.soilgrids.org/query?lon=" + logitude + "&lat=" + latitude 
    $.ajax(url, {
        method: "GET" // You need to read the documentation of the API provider to see if it is a POST or GET call
        // There are more option that you can set. Read the documentation of jquery,
        success: (data) => {
            // This is where you perform effect after you get the data from API
        }
    })
})

详情请见https://api.jquery.com/jquery.ajax/

编辑

刚刚看到您的代码。应该进行一些小的更改以使其更好：

// Warp it into a <form> block so that it will response to "Enter" Key
<form id="form">
    Latitude : <input id='lat'/> <br/>
    Longitude: <input id='lon'/> <br/>
    // Good habit to state the type of a button
    <button type="submit" id='submit'>Submit<button/>
</form>

【讨论】：