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

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

转载作者：行者123 更新时间：2023-12-02 22:37:26

25

4

我目前有一个输入搜索栏，其中包含一个提交按钮和将显示我想要的 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/

25

4

0

文章推荐： php - 自动链接功能无法正常工作

文章推荐： powershell - PowerShell 中 [Char[]] 的用途

文章推荐： perl - 为什么 RegEx 输出错误？

performance - 更快地计算两个位置之间的距离(邮政编码)
我正在编写一个 VBA 脚本，用于查找指定半径内的邮政编码。我有一个 Access 数据库，表中有多个记录。每条记录在表中都有一个名称、地址和邮政编码字段。 Access 时的 VBA 代码提示用户输
python - 数据验证 - 邮政编码
我遇到了以下问题: 定义一个函数 postalValidate(S) ，它首先检查 S 是否代表一个有效的邮政编码:首先，删除所有空格；余数必须是 L#L#L# 的形式，其中 L 是字母(小写或大写)
javascript - 检索特定列/邮政编码
我试图仅检索此脚本中的邮政编码字段。有没有办法只返回这个值？ function LookuptableWend(query) { var tr = document.get
javascript - Jquery 邮政编码 clientvalidate
我正在开发一个自定义验证器来验证和替换(如果可能)邮政编码。这是荷兰邮政编码，应类似于“5050 AA”。当用户输入“5050AA”时，该邮政编码应替换为“5050 AA”。我通过将以下脚本添加到我的
Javascript 邮政编码，六位数字(不包括空格)
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。要求提供代码的问题必须表现出对所解决问题的最低限度的了解。包括尝试的解决方案、为什么它们不起作用以及预期结果
php - 解析输入以查看它是地址、邮政编码、城市还是州？
我有一个工作板，用户可以通过 Google-Maps API 提交他的位置，该 API 在 map 上绘制工作。问题是，因为它是一个基于位置的工作板，所以我想允许最广泛的输入是邮政编码(这样用户可以
PHP 酒吧定位器邮政编码 MYSQL
在我的 php 文件上使用此功能时，我不断出现空屏幕，XML 文件中没有属性 // Get parameters from URL $center_lat = ( isset( $_GET["
php - 地名城市 [邮政编码] 表
我如何防止接收带有子站点的城市并只接收最大的村庄。示例: 目前我得到 2 条记录，第一个是主要城市，第二个是邻居。但我只想要主要城镇。 CH 8280 Kreuzlingen CH
php - 邮政编码/位置搜索 - PHP
对不起，我迷路了。我正在尝试构建一个搜索页面，该页面使用英国邮政编码或位置来查找气枪网站(我们称它们为“商店”，这样我就不必向那些不知道气枪是什么的人解释)，每个store 我在邮政编码、县、城镇/城
mysql - 搜索查询 - 邮政编码、公司名称或位置
我对 SQL 查询有点困惑。用户应该能够搜索邮政编码、公司名称或位置我有下表: 公司表 companyid | name | location 1 Sh
PHP MySQL 存储距离计算器 - 邮政编码
是的，我一直在努力研究如何将给定的邮政编码与商店地址的数据库进行比较，并根据哪个最接近给定的邮政编码(我猜是邮政编码)对它们进行排序。这主要是出于兴趣，而不是我征求你的意见然后卖给客户:-O 首先，
python - 在python中通过正则表达式提取Alberta(加拿大)邮政编码
我想从地址字符串中提取阿尔伯塔(加拿大)地区的邮政编码。例如: addr = '12345-67 Ave, Edmonton, AB T1A 2B3, Canada' 应该提取T1A 2B3。匹
ruby - ruby 中的格式字符串(邮政编码)
我需要重新格式化英国邮政编码列表，并从以下内容开始去除空格和大写: postcode.upcase.gsub(/\s/,'') 我现在需要更改邮政编码，以便新邮政编码的格式与以下正则表达式匹配: ^(
excel - 检测单元格中超过 5 个字符的宏(邮政编码)
我创建了一个基于列名检索范围的函数。这是我的代码: Sub sep_Filter() Dim zip_rng As String With Sheet2 zip_rng
web-services - 邮政编码 + 国家/地区到地理坐标
获取给定国家的给定邮政编码/邮政编码的坐标(纬度/经度)的最完整、精确和可靠的方法是什么？我需要发出大量请求，因此高 API 限制率(甚至可能不存在)会很有用。 GeoNames转储会很酷，但它似乎有
string - 从字符串中解析可用的街道地址、城市、州、邮政编码
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
javascript - 结帐页面付款方式选项卡中的 Opencart 邮政编码/城市
如何在 Opencart 版本 2.1.0.2 的付款方式选项卡中发布发货城市或邮政编码的数据我想将 COD 限制在某些城市。有人可以帮我吗？最佳答案创建自定义表来存储可用的邮政编码。为产品列表
elasticsearch - 定制分析器，用例:邮政编码[ElasticSearch]
将其设置为名为customers / customer的索引/类型。此集合的每个文档都有一个邮政编码属性。邮政编码基本上可以像这样: 字符串-字符串(例如:8907-1009) 字符串字符串(例如
iphone - 从邮政编码(邮政编码)或城市/州获取坐标
我现在正在使用 Map Kit 和 Core Location，需要从邮政编码或城市/州获取位置信息。有什么办法吗？最佳答案您可以使用 CLGeocoder支持将地址转换为坐标以及反向转换的类。例
user-input - 您是否将地址分解为街道/城市/州/邮政编码？
我当前的应用程序需要存储用户的地址信息。我目前正在争论是使用惯用的街道地址/城市/州/ zip 文本框和下拉菜单，还是采用 Google 的方法，将所有内容都放在一行上。关于以这两种方式存储地址信息的

首页

博学

6Ren·AI

商城

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