javascript - curl API PHP 使用 ajax
问题描述
我正在尝试使用带有地名的 curl PHP 获取 wikipedia api。但是php文件和脚本之间的连接似乎有问题。我已经在 PHP 中尝试了带有硬编码值的 url,但是如果我尝试使用 $_REQUEST 进行连接,则 url 不起作用,就像缺少参数一样。我在 ajax 中对数据进行了硬编码,只是为了检查目前是否正在工作,但一旦工作,它应该从表单中获取信息。代码如下所示:
$("#wikiSearch").click(function(){
$.ajax({
url: "libs/php/requests.php",
type: 'POST',
dataType: 'json',
data: {
q: "london",
},
success: function(result) {
console.log("success");
console.log(result);
},
error: function(jqXHR, textStatus, errorThrown) {
// alert( "Sorry, there was a problem!" );
// console.log( "Error: " + errorThrown );
// console.log( "Status: " + status );
// console.dir( xhr );
}
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>APIS examples</title>
<meta name="author" content="GeoNames APIs">
<meta name="description" content="APIS example">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="favicon.ico" rel="icon">
<!--<link href="vendors/bootstrap/bootstrap.min.css" rel="stylesheet">-->
<!--<link href="css/style.css" rel="stylesheet"></link>-->
</head>
<body>
<div>
<form method="post">
<input id="input" type="text" placeholder="Search in Wikipedia" name="input">
<br>
<button type="submit" id="wikiSearch">Search</button>
</form>
</div>
<script type="application/javascript" src="libs/js/jquery-2.2.3.min.js"></script>
<script type="application/javascript" src="libs/js/script.js"></script>
</body>
</html>
<?php
ini_set("display_errors", "On");
error_reporting(E_ALL);
$executionStartTime = microtime(true) / 1000;
$url='http://api.geonames.org/wikipediaSearchJSON?q='. $_REQUEST["q"] . '&maxRows=10&username=xxxxx';
$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);
//$q = $_REQUEST["q"];
//print_r($result);
//var_dump($_POST);
curl_close($ch);
$decode = json_decode($result,true);
$output['status']['code'] = "200";
$output['status']['name'] = "ok";
$output['status']['description'] = "mission saved";
$output['status']['returnedIn'] = (microtime(true) - $executionStartTime) / 1000 . " ms";
$output['data'] = $decode;
header('Content-Type: application/json; charset=UTF-8');
echo json_encode($output);
?>
解决方案
基于您的原始代码,但通过简单的Fetch
调用和 NO curl 修改为单个页面 - 它可能有助于您诊断问题。这“按原样”工作
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST['q'] ) ){
$st = microtime(true) / 1000;
$username='geronimo';
$rows=10;
$url=sprintf(
'http://api.geonames.org/wikipediaSearchJSON?q=%s&maxRows=%d&username=%s',
$_POST['q'],
$rows,
$username
);
$json=file_get_contents( $url );
$output=['status' => [
'code' => 200,
'name' => 'ok',
'description' => 'mission_saved',
'returnedIn' => ( microtime(true) - $st ) / 1000 . " ms",
'data' => json_decode($json)
]];
exit( json_encode($output) );
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>APIS examples</title>
</head>
<body>
<div>
<form method="post">
<input id="input" type="text" placeholder="Search in Wikipedia" name="input">
<br />
<button type="submit" id="wikiSearch">Search</button>
</form>
<output></output>
<script>
document.getElementById('wikiSearch').addEventListener('click',(e)=>{
e.preventDefault();
let fd=new FormData();
fd.append('q',e.target.parentNode.querySelector('input[type="text"][name="input"]').value);
fetch( location.href, { method:'post',body:fd })
.then( r=>r.json() )
.then( json=>{
console.log(json);
document.querySelector('output').textContent=JSON.stringify(json)
})
});
</script>
</div>
</body>
</html>
您可以调整您的 PHP 以包含一些相同的逻辑(以测试q
是否存在)
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST['q'] ) ){
$executionStartTime = microtime(true) / 1000;
$url='http://api.geonames.org/wikipediaSearchJSON?q='. $_POST['q'] . '&maxRows=10&username=geronimo';
$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'] = "mission saved";
$output['status']['returnedIn'] = (microtime(true) - $executionStartTime) / 1000 . " ms";
$output['data'] = $decode;
header('Content-Type: application/json; charset=UTF-8');
exit( json_encode( $output ) );
}
?>
但是需要防止您的 AJAX 函数允许button
实际提交表单,因为它会尝试正常执行 - 因此使用e.preventDefault()
$("#wikiSearch").click(function(e){
e.preventDefault();
$.ajax({
url: "libs/php/requests.php",
type: 'POST',
dataType: 'json',
data: {
q: "london",
},
success: function(result) {
console.log("success");
console.log(result);
},
error: function(jqXHR, textStatus, errorThrown) {
// alert( "Sorry, there was a problem!" );
// console.log( "Error: " + errorThrown );
// console.log( "Status: " + status );
// console.dir( xhr );
}
});
});
推荐阅读
- c# - 如何在服务而不是后台进程下运行 c# windows service 应用程序?
- javascript - 请问如何创建 JQuery 播放列表?
- flutter - 如何在颤振中获取构建之外的上下文?
- reactjs - 如何使用另一个 docker 容器作为主网站的子目录?
- xamarin - 如何使用 EAAccessoryManager Xamarin Forms 将 ESP32 连接到 iPhone?
- python - 从分类器输出中提取字典值
- regex - 根据条件打印字符串之间的行
- django - 我收到完整性错误,在 django 中将数据发送到 POST api 时
- azure - 使用事件中心命名空间上定义的策略将事件发布到 Azure 事件中心
- azure - 使用 Microsoft Graph API 在 azure AD 中注册(创建)应用程序的方法