前端之家

  1. 首页
  2. 问答

如何通过在搜索栏中输入邮政编码来显示API数据？

• 问答

我目前有一个带有“提交”按钮和代码的输入搜索栏，它将显示所需的API数据。但是，在API的URL中，它将位置设置为邮政编码“ FK1 5LD”，您可以看到“ area = FK1％205LD”部分。数据的显示和格式化方式对我来说非常合适。但是我希望能够在输入搜索栏中输入邮政编码“ FK1 5LD”，然后单击“提交”按钮，它将显示我已经编码的API数据。

谢谢！

搜索栏和按钮HTML

<input name="search" placeholder="Search.." type="text"><button>Search</button>

用于显示API信息的Javascript 

<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>
jhcwengbin 回答：如何通过在搜索栏中输入邮政编码来显示API数据？

可能没有标记-但是您只想让数据调出当前在搜索字段中键入的内容，对吗？如果是这样，就应该这样做-只需做一些元素引用，并公开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>
apihtmljavascriptjquerysearchbar
本文链接：https://www.f2er.com/3164210.html

大家都在问