AJAX not passing variable to PHP file

Question

I'm semi-new to PHP and I'm working on a website's dashboard page where an administrator can see all existing admins, there's a button on each admin name's row that's supposed to check the privileges of each admin (access to article editing, clients payment information, etc).

When the admin clicks on that button, a div slides in the page and it shows this window:

Admin Privileges Dialog

Where it shows the current permissions.

I have a var called " admin_id " which is updated whenever a button is clicked, because as I'm using "foreach" to iterate the list of admins, I also have their " admin_id " linked to each of these buttons.

My point is to use ajax so an admin can change another admin's permissions without reloading the page and reopening this little dialog so I'm trying to pass the variable " admin_id " to my PHP file where I have my SQL and returning it

check_privileges.php

<?php

    include("../../includes/dbconnect.php");


    $admin_id = $_GET['admin_id'];


    $sql = "SELECT * FROM admins WHERE admin_id = $admin_id";
    $sql_query = mysqli_query($dbconnect, $sql);

    // storing results in array
    $data = array();
    while ($row = mysqli_fetch_array($sql_query)){

        $data[] = $row;
    }

    // returning response in JSON format
    echo json_encode($data);

?>

and this is the page's file where I'm requesting the ajax, in get method, to receive the results from the database:

users.php

$(document).ready( function(){

    // We now have the admin_id of the user correspondent to the row we're clicking, declaring the admin_id variable outside of the scope of the function so I can access it anywhere

    var admin_id;
// update the variable value with the value of the admin_id of the button
    $(".row-user-perm").find("button").click( function() {
        var admin_id = $(this).val();
        console.log(admin_id);

    });

    $('.button-priv').click( function(){

        var ajax = new XMLHttpRequest();
        var method = "get";
        var url = "includes/check_privileges.php";
        var data = {admin_id: admin_id};
        var asynchronous = true;
        var success = function (data) {
                    console.log(data.report.data[0].article_flag);
                };

        ajax.open(method, url, data, asynchronous);
        // sending ajax request
        ajax.send();

        // receiving response from data.php
        var data = {};
        ajax.onreadystatechange = function(){
            if (this.readyState == 4 && this.status == 200){
                
                // converting JSON back to array
                var data = JSON.parse(this.responseText);
                console.log(data); // for debugging
                // alert(data[0].article_flag);

                var article_flag = data[0].article_flag;
        
                if (article_flag == 1) {
                    console.log("Article flag is 1!");
                    $('#article-perm-svg').removeClass('no-perm');
                    $('#article-perm-svg').addClass('has-perm');
                }else{
                    alert("article flag is not 1!");
                };
            };


        };
    });

And when I click a "Check Privileges" button, I get this error in the browser's console:

JSON console error

JSON console error trace?

I know the problem is the $_GET['admin_id'] being empty so it's not receiving any value because if I use an existing admin_id, I get the results in the page and everything working.

What am I doing wrong? I've read online that I don't need to use a post method to do this, but I've tried both anyway and nothing worked.

Thanks in advance

Answer 1

The third argument to open is if the request should be handled asynchronously or not. It isn't where you put the data.

If you were making a POST request, then you would put the data in as the first argument to the send method… but that doesn't accept a plain object.

Since you are making a GET request, you need to encode the data into the query string of the URL that you pass as the second argument to open .

 const admin_id = "12345"; const relativeUrl = 'includes/check_privileges.php'; const url = new URL(relativeUrl, location.href); url.searchParams.append('admin_id', admin_id); console.log(url.toString())