Having some trouble with an ajax function I developed for a small project. The issue lies in running the code inside the .done() function. This function is supposed to receive a json object from php (which I am obtaining a response via cURL), but it appears that no response is being returned. The project itself is built using SBAdmin 2 (Bootstrap) along with jQuery 3.5.1.
Here is the specific ajax snippet:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- Bootstrap core JavaScript-->
<script src="../resources/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="../resources/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="../resources/js/sb-admin-2.min.js"></script>
<script>
$(document).ready(function() {
$("#btnLogin").click(function() {
console.log('clicked');
var uname = document.getElementById('inpUsername').value;
var pwd = document.getElementById('inpPassword').value;
$.ajax({
type: 'POST',
url: 'resources/php/functions/main-functions.php?',
data: "inpUsername="+uname+"&inpPassword="+pwd,
dataType: 'json'
})
.done(function(data, textStatus, jqXHR){
console.log('Response received:', data); // Log the entire response
if (data.status === 'success') {
console.log('Authentication successful:', data.message);
} else {
console.log('Authentication failed:', data.message);
}
})
.fail(function(jqXHR, textStatus, errorThrown){
console.log('AJAX Error:', textStatus); // Log the error status
console.log('Error details:', errorThrown); // Log the error details
});
$(location).prop('href', '/index.php?view=loggedin');
location.reload();
});
});
And here is the corresponding php backend setup:
if(!empty($_POST['inpUsername']) && !empty($_POST['inpPassword'])){
if(authUser()) {
header('Content-Type: application/json');
die(json_encode(['status' => 'success', 'message' => 'User authenticated']));
} else {
header('Content-Type: application/json');
die(json_encode(['status' => 'error', 'message' => 'Invalid credentials']));
}
}
When attempting to run the request in the browser, the .fail() section gets executed. Additionally, I'm seeing a status of "NS_BINDING_ABORTED."
If anyone has any insights on where my mistake might be, I'd appreciate the help!
Also, just a heads up - I'm still learning the ropes :)
I've already tried switching from success and error functions to done and fail without any changes in behavior. Manually testing the request through devtools seems to work fine with cURL, but not in the browser. I even experimented with the order of including jQuery but again, no luck.