如何使用jQuery - GeoNames.Org api迭代json对象

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。GeoNames.Org 是一个提供地理信息的服务，可以通过 API 获取各种地理数据。

类型

jQuery: JavaScript 库
GeoNames.Org API: 地理信息服务 API

应用场景

使用 jQuery 和 GeoNames.Org API 可以构建一个地理位置查询应用，用户输入地名后，应用可以返回该地点的经纬度、时区等信息。

示例代码

以下是一个简单的示例，展示如何使用 jQuery 和 GeoNames.Org API 迭代 JSON 对象并显示结果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GeoNames API Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="location" placeholder="Enter location">
    <button id="search">Search</button>
    <div id="results"></div>

    <script>
        $(document).ready(function() {
            $('#search').click(function() {
                var location = $('#location').val();
                $.ajax({
                    url: 'http://api.geonames.org/searchJSON',
                    data: {
                        q: location,
                        username: 'your_username', // Replace with your GeoNames username
                        maxRows: 5
                    },
                    dataType: 'jsonp',
                    success: function(data) {
                        $('#results').empty();
                        $.each(data.geonames, function(index, item) {
                            $('#results').append('<p>' + item.name + ', ' + item.countryName + '</p>');
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error('Error:', error);
                    }
                });
            });
        });
    </script>
</body>
</html>

解释

HTML 结构: 包含一个输入框用于输入地名，一个按钮用于触发搜索，以及一个用于显示结果的 div。
jQuery 代码:
- 当点击搜索按钮时，获取输入框中的地名。
- 使用 $.ajax 发送请求到 GeoNames.Org API，传递地名和用户名（需要注册 GeoNames 账户获取）。
- 成功返回数据后，使用 $.each 迭代 JSON 对象中的 geonames 数组，并将结果显示在页面上。