使用AJAX+PHP/cURL调用Geonames API填充HTML遇跳转问题求助

我正尝试将Geonames API返回的信息填充到简单HTML页面中，这是我首次用这种方式使用cURL。目前代码能从API获取数据，但不会更新HTML，而是直接跳转到JSON页面。

我试过在AJAX里用preventDefault()阻止提交按钮默认行为，但没生效就注释掉了。HTML部分没问题，只是给几个<p>元素设了ID用于输出。

更新：在AJAX的error块添加了控制台错误提示后，发现即使返回状态是code: '200'和name: 'ok'，success块也有问题。

我的PHP代码： #

<?php

    ini_set('display_errors', 'On');
    error_reporting(E_ALL);

    $executionStartTime = microtime(true);

    $url='http://api.geonames.org/oceanJSON?formatted=true&lat=' . $_REQUEST['oceanlat'] . '&lng=' . $_REQUEST['oceanlng'] . '&username=CHANGEDstyle=full';

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_URL,$url);

    $result=curl_exec($ch);

    curl_close($ch);

    $decode = json_decode($result,true);    

    $output['status']['code'] = "200";
    $output['status']['name'] = "ok";
    $output['status']['description'] = "success";
    $output['status']['returnedIn'] = intval((microtime(true) - $executionStartTime) * 1000) . " ms";
    $output['ocean'] = $decode['ocean'];
    
    header('Content-Type: application/json; charset=UTF-8');

    echo json_encode($output); 
?>

我的JavaScript代码： #

$('#oceansub').click(function(/*e*/) {
  //e.preventDefault();
    $.ajax({
        url: "php\nearestOcean.php",
        type: 'POST',
        dataType: 'json',
        ocean: {
            lat: $('#oceanlat').val(),
            long: $('#oceanlng').val()
        },
        success: function(result) {

            console.log(JSON.stringify(result));

            if (result.status.name == "ok") {

                $('#txtDistance').html(result['ocean']['distance']);
                $('#txtGeonameID').html(result['ocean']['geonameId']);
                $('#txtName').html(result['ocean']['name']);

            }
        
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log("Please enter a lat or long that is over water.")
        }
    }); 

});

解决方法： #

1. 修复preventDefault()的使用问题
   取消注释e.preventDefault()，确保参数e被正确传入，阻止按钮的默认表单提交行为：

$('#oceansub').click(function(e) {
  e.preventDefault();
  // 后续AJAX代码不变
});

2. 修复AJAX的URL路径错误
   JavaScript中反斜杠是转义字符，将路径中的反斜杠改为正斜杠：

url: "php/nearestOcean.php",

3. 修复AJAX的data参数格式
   PHP通过$_REQUEST['oceanlat']和$_REQUEST['oceanlng']接收参数，需将参数平铺传入，而非嵌套在ocean对象中：

data: {
    oceanlat: $('#oceanlat').val(),
    oceanlng: $('#oceanlng').val()
},

4. 修复Geonames API的URL参数错误
   API URL中username和style参数缺少分隔符&，修正后：

$url='http://api.geonames.org/oceanJSON?formatted=true&lat=' . $_REQUEST['oceanlat'] . '&lng=' . $_REQUEST['oceanlng'] . '&username=CHANGED&style=full';

注意：需将CHANGED替换为你的真实Geonames用户名。

5. 增加PHP端的错误处理
   在解析API返回结果前，判断JSON解析是否成功，避免后续逻辑出错：

if(!$decode) {
    $output['status']['code'] = "500";
    $output['status']['name'] = "error";
    $output['status']['description'] = "Failed to parse API response";
    echo json_encode($output);
    exit;
}

修复以上问题后，页面将不再跳转，AJAX会正常获取数据并更新指定的HTML元素。

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