尝试使用AJAX, PHP/cURL用REST API信息填充HTML

Question

所以，朋友们，我想做的是填充一个非常简单的HTML页面与一些信息从Geonames API。这是我第一次以这种方式使用cURL，所以希望得到一些帮助。我当前的代码从api获取数据，但不是更新HTML，而是将页面重定向到JSON页面。

<?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); 
?>

$('#oceansub').click(function(/*e*/) {
//e.preventDefault();
$.ajax({
url: "phpnearestOcean.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.")
}
}); 
});

我试图在AJAX中使用preventDefault()来阻止提交按钮的实际执行，但这不起作用，这就是为什么它被注释掉了。

我觉得有一个愚蠢的简单的原因，但我现在完全疲惫。图像是我进入的页面。但是我期待的是什么信息被插入到我的HTML按照jQuery/Ajax。

我假设我的HTML不是问题，因为我刚刚ID了一些<p>元素，试图得到一些简单的输出。

你必须原谅这些垃圾id，它们只是暂时的，而我让代码工作。如果你需要更多的信息，请告诉我，谢谢:)

更新:我已经在Ajax底部的块中添加了适当的控制台错误，成功块中的某些东西不起作用。即使我得到了code: '200'和name: 'ok'?

Answer 1

原来这里所有的代码都很好，原来当使用VS code复制相对路径到文件时，由于某种原因，它使用反斜杠而不是前斜杠-。-我吸取了这个教训，我以后会检查路径。