如何通过HTML表单更新JS AJAX参数调用PositionStack接口获取经纬度

你需要把AJAX请求封装为可复用函数，和按钮点击事件绑定即可，修改后的完整代码如下：

<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script>
        // 封装地理编码请求为可复用函数
        function getGeocode(address) {
            $.ajax({
                url: 'http://api.positionstack.com/v1/forward',
                data: {
                    access_key: '替换为你自己的access_key',
                    query: address,
                    limit: 1
                }
            }).done(function(data) {
                // 接口返回本身就是JSON，无需额外parse
                console.log(data);
                // 可自行扩展后续处理逻辑，示例为提取经纬度
                if(data && data.data && data.data.length > 0) {
                    const lat = data.data[0].latitude;
                    const lon = data.data[0].longitude;
                    console.log('查询到的经纬度：', lat, lon);
                }
            });
        }

        function update() {
            // 匹配ID为query的输入框取值
            const query = document.getElementById("query").value;
            if(!query.trim()) {
                alert('请输入要查询的地址');
                return;
            }
            // 触发地理编码请求
            getGeocode(query);
        }
    </script>
</head>

<body>
    <form>
        <input id="query" value="" placeholder="请输入地址，例如：Transilvania,Romania" />
        <button type="button" onclick="update()">更新</button>
    </form>
</body>

</html>

关键修改点 #

• 移除了页面加载就自动执行的AJAX请求，封装为独立的getGeocode函数，支持传入地址参数
• 修正了update函数中的输入框ID选择逻辑，匹配页面上id="query"的输入元素
• 增加了空值校验，避免无效请求
• 修正了返回值处理逻辑：PositionStack接口返回本身就是JSON格式，无需额外调用JSON.parse解析

注意：请将代码中的替换为你自己的access_key修改为你在PositionStack平台申请的真实密钥，免费版接口只能用HTTP协议请求，不要改成HTTPS避免跨域报错。

内容的提问来源于stack exchange，提问作者Stefan3D