Now I am asking this question after a huge efforts searching for the solution, I know that are a lot of questions that are the same but none of them worked for me, I have three main files, index.html , main.js and func.php all of them are in the same directory in XAMPP/htdocs/ , I am working in a local machine “XAMPP”, now the main problem is that when I try to get the data from the php file using an AJAX call, it returns the whole php raw code, I tried to make the files so minimalistic for testing purpose. and when I try to run the php file from the browser it works fine
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" method="get">
<select name="course" id="courses">
<option disabled selected>select course</option>
</select>
</form>
<script src="jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js:
$(document).ready(function() {
$.ajax({
url: "func.php",
method: "GET",
success: function(data) {
console.log(data);
},
error: function (x, y, z) {
console.error(x);
console.error(y);
console.error(z);
}
});
});
func.php:
<?php
$data = [["id" => "1", "name" => "html"],["id" => "2", "name" => "css"]];
echo json_encode($data);
The return: but it came form success not error:
<?php
$data = [["id" => "1", "name" => "html"],["id" => "2", "name" => "css"]];
echo json_encode($data);
I’ve tried to rely on Gemini for the solution, so I’ve tried quite a few solutions, and I’ll do most of them now, I will till most of them now.
First Try: in main.js jQuery AJAX call
I tried to change it to be:
$(document).ready(function() {
$.ajax({
url: "func.php",
data: {func: "get_data"},
dataType: "json",
type: "GET",
success: function(data) {
console.log(data);
},
error: function (x, y, z) {
console.error(x);
console.error(y);
console.error(z);
}
});
});
but unfortunately it didn't work and the response was:
readyState: 4
responseText: "<?phprn ob_start();rn header('Content-type: application/json; charset=UTF-8');rnrn $data = [["id" => "1", "name" => "html"],["id" => "2", "name" => "css"]];rn ob_end_clean();rn ob_end_flush();rnrn echo json_encode($data);rn "
status: 200
statusText: "OK"
parsererror
main.js:13 SyntaxError: Unexpected token '<', "<?php
"... is not valid JSON
Second Try: this time with the first changes I tried to change the func.php file to be:
<?php
ob_start();
header('Content-type: application/json; charset=UTF-8');
$data = [["id" => "1", "name" => "html"],["id" => "2", "name" => "css"]];
ob_end_clean();
ob_end_flush();
echo json_encode($data);
exit();
but it didn't work also with the same response
I also tried to use a CDN for the jQuery but it didn’t work
I am really now frustrated and I don’t know what to try else, if you could help me I would be very appreciated
Ahmed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.