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: "<?php\r\n ob_start();\r\n header('Content-type: application/json; charset=UTF-8');\r\n\r\n $data = [[\"id\" => \"1\", \"name\" => \"html\"],[\"id\" => \"2\", \"name\" => \"css\"]];\r\n ob_end_clean();\r\n ob_end_flush();\r\n\r\n echo json_encode($data);\r\n "
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
>Solution :
Make sure
-
you’re using a proper webserver and accessing the HTML file via http://localhost/index.html in your browser (assuming you’re testing this on your local machine),
-
that your webserver has PHP installed in it, and
-
your file is named with a .php extension.
Hopefully 2) and 3) are covered, since you say the file is called func.php, and you said you’ve installed XAMPP. So I’d guess that 1) is the problem.
If you are using anything like Visual Studio Code’s Live Server, that does not support PHP – although some people have reported success getting it to do so by adding some plugins (see How do I configure vscode live server to process php files properly (I'm using Win10 and Chrome)?. Apache (which you get with XAMPP) is probably a better bet because it has good support for PHP, and will more accurately reflect the environment that your PHP code would end up running in if you deployed it to a real website.