Question 237273 in PHP Question posted in
Official manual can be found here.

Php – Ajax request not receiving any response

I wrote an ajax function for a small project I’m working on and I can’t get it to run the code inside the .done() function. The function should receive a json object from php (I am getting a response via cURL), however it seems like no response is being given. The project is written using SBAdmin 2 (Bootstrap) and jQuery 3.5.1.

This is the ajax part:

<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 this is the php backend:

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']));
    }
}

Running the request in the browser shows the code inside the .fail() function being executed. I am also getting a status "NS_BINDING_ABORTED"

Has anybody got an idea where I’m missing something?

I’m a newbie btw:)

I already changed the ajax function from success and error to done and fail – no effect.
Also I tried manually running the request using devtools – works in cURL but not in the browser.
I rearranged the part where jQuery is being included (before or after the ajax part) – no effect.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Wow thanks for the help! I think moving the location.reload() inside $ajax.done() did the job.

    However, I implemented all the other suggestions as well. That should make it look a bit cleaner I guess.

    The code now looks as follows:

    $(document).ready(function() {
        $("#btnLogin").click(function() {
            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,
                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);
                    }
                    location.reload();
            })
            .fail(function(jqXHR, textStatus, errorThrown){
                console.log('AJAX Error:', textStatus); // Log the error status
                console.log('Error details:', errorThrown); // Log the error details
            });

        });
    });

  2. 0

    Besides the issues people pointed out in the comments, I think you might be pinging a wrong url. Your other assets use this path:

    ../resources/foldername etc

    While your AJAX targets this one:

     url: 'resources/php/functions/main-functions.php?',

    As you can see, the resources folder in AJAX doesn’t have ".."(two dots) in front of it.

    Unless you have another resources folder in the root folder, you should probably be using this url:

    url: '..resources/php/functions/main-functions.php?',

    Also, just a nitpick, but since you are sending a POST request, not GET, it would probably be better practice to not use query params. I would personaly go with something like this instead:

    $.ajax({
    type: 'POST',
    url: '..resources/php/functions/main-functions.php',
    data: {
        inpUsername: uname,
        inpPassword: pwd
    },
    dataType: 'json'
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search