I try query my database from javascript, using ajax request to my php file. This is my code:
<?php
include('db.php');
session_start();
?>
<!doctype html>
<html lang="en">
<body>
<div class="container">
<canvas id="myCanvas" width="600" height="100"></canvas>
<script src="jquery-3.5.1.min.js"></script>
<script src="trainPassFrequency.js"></script>
...
So I included jquery file into my folder, so that I can access it as shown above. Now my trainPassFrequency.js look like this:
function parseData(data) {
console.log(data);
}
function trainFrequency() {
$.post('ajaxRequests/trainfrequency.php'), {}, function (data) {
console.log(data);
if (typeof data === 'object') {
parseData(data);
}
}
}
trainFrequency();
where trainfrequency.php only returns (echo) output of the sql query. When I run this code, I never get through $.post('ajaxRequests/trainfrequency.php'), {}, function (data) {. Can anyone see my mistake?
Advertisement
Answer
I see that the problem is in your JavaScript code syntax, here:
$.post('ajaxRequests/trainfrequency.php'), {}, function (data) {
console.log(data);
if (typeof data === 'object') {
parseData(data);
}
}
While it seems that there is no syntax error, it really looks like it is not what you wanted. Notice this part of code: $.post(‘ajaxRequests/trainfrequency.php’) you somehow added ending parenthesis very early, so that part of code should look like this:
$.post('ajaxRequests/trainfrequency.php', {}, function (data) {
console.log(data);
if (typeof data === 'object') {
parseData(data);
}
});
Since this is a jQuery method you want to wrap all passed arguments between () parenthesis.
Edit:
Also I want to explain why you didn’t get any error, since this mistake can happen to all of us, and code just silently fails (doesn’t work the way you want) even if it’s perfectly valid in terms of syntax.
What happened is that you called $.post method with just one argument, hence this line of code: $.post(‘ajaxRequests/trainfrequency.php’) then you added following data object, and callback arguments which should be inside the $.post method (between parenthesis), but since you closed parenthesis after first argument of $.post method, everything else became not related to that method at all, and in JavaScript comma is a valid operator, so when you separate data constructs with a comma operator it actually returns the value of the rightmost operand, this operator just evaluates those operands from left to right. So if you console.log this thing:
console.log($.post('ajaxRequests/trainfrequency.php'), {}, function (data) {
console.log(data);
if (typeof data === 'object') {
parseData(data);
}
});
You’ll get this function definition back in the console (rightmost value returned):
function (data) {
console.log(data);
if (typeof data === 'object') {
parseData(data);
}
}
Since what you did was unintentional I think it’s really important to understand what happens because as I discussed above this code is happily executed but the reason could be hard to understand without understand the comma operator, and comma operator is not very common in the code, and is mostly used in code minification, optimization tools to reduce code size and such.