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
dataType: "json"to the AJAX isn't going to help either, because raw PHP code isn't JSON!I also tried to use a CDN for the jQuery...why? The jQuery part is obviously running, otherwise it wouldn't run the AJAX code. I could be wrong, but it seems like you are doing a lot of random guessing, rather than looking carefully at the basic fact of the situation.http://localhost/index.htmlin your browser (assuming you're testing this on your local machine), 2) that your webserver has PHP installed in it, and 3) your file is named with a.phpextension. 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.func.phpaddress in your browser. So JavaScript, jQuery, Ajax, HTML, ... have nothing to do with it.when I try to run the php file from the browser it works fine...I would guess you accessed it via a different URL then, than the one the AJAX code is trying to use. Use the browser's Network tool as well to look at the full URL the browser built for the AJAX request, you can then compare and contrast the URLs in each case.