I have this very simple project making use of Ajax:
html:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>test</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
</head>
<body>
<button id='btn'>Click</button>
<script src='jquery-3.6.3.min.js'></script>
<script src='main.js'></script>
</body>
</html>
main.js:
$('#btn').click(() => {
$.ajax({
url: 'test.php',
type: 'POST',
dataType: 'json',
success: res => {
console.log('success');
console.log(res);
},
error: errorThrown => {
console.log(errorThrown);
}
})
})
and php:
<?php
ini_set('display_errors', 'On');
error_reporting(E_ALL);
$executionStartTime = microtime(true);
$url='http://api.geonames.org/geoCodeAddressJSON?formatted=true&q=Madrid&username=my_user_name&style=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['data'] = $decode['address'];
header('Content-Type: application/json; charset=UTF-8');
echo json_encode($output);
?>
I have installed Apache2 following that tutorial with the project in /var/www/html/my_project and I have also installed XAMPP following that tutorial with the very same project in /opt/lampp/htdocs/my_project.
When using XAMPP:
sudo service apache2 stop
sudo /opt/lampp/lampp start
and in my browser: localhost/my_project,
the Ajax call works fine.
But when using Apache2:
sudo /opt/lampp/lampp stop
sudo service apache2 start
and in the browser: localhost/my_project,
the Ajax doesn't work and throw the following:
XML Parsing Error: no element found
Location: http://localhost/test/test.php
Line Number 29, Column 1:
as well as:
Object { readyState: 4, getResponseHeader: getResponseHeader(e), getAllResponseHeaders: getAllResponseHeaders(), setRequestHeader: setRequestHeader(e, t), overrideMimeType: overrideMimeType(e), statusCode: statusCode(e), abort: abort(e), state: state(), always: always(), catch: catch(e)
, … }
abort: function abort(e)
always: function always()
catch: function catch(e)
done: function add()
fail: function add()
getAllResponseHeaders: function getAllResponseHeaders()
getResponseHeader: function getResponseHeader(e)
overrideMimeType: function overrideMimeType(e)
pipe: function pipe()
progress: function add()
promise: function promise(e)
readyState: 4
responseText: `<?php\nini_set('display_errors', 'On');\n error_reporting(E_ALL);\n\n $executionStartTime = microtime(true);\n\n $url='http://api.geonames.org/geoCodeAddressJSON?formatted=true&q=Paris,France&username=clovis&style=full';\n $ch = curl_init();\n curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);\n curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);\n curl_setopt($ch, CURLOPT_URL,$url);\n\n $result=curl_exec($ch);\n\n curl_close($ch);\n\n $decode = json_decode($result,true);\t\n\n $output['status']['code'] = "200";\n $output['status']['name'] = "ok";\n $output['status']['description'] = "success";\n $output['status']['returnedIn'] = intval((microtime(true) - $executionStartTime) * 1000) . " ms";\n $output['data'] = $decode['address'];\n\n header('Content-Type: application/json; charset=UTF-8');\n\n echo json_encode($output);\n?>\n`
setRequestHeader: function setRequestHeader(e, t)
state: function state()
status: 200
statusCode: function statusCode(e)
statusText: "OK"
then: function then(t, n, r)
<prototype>: Object { … }
In both locations, the file permissions are the same. I'd like to understand the issue here.
