How to make a page where data is loaded from the database and loaded via ajax?

Question

PHP

In general, the question may be stupid, but I hung up.

I am making an admin. Page of all records from the database. In general, I receive data through a curl request to my server, which specifies the conditions of the request and, most importantly, the api-key, which makes it possible to make requests.

The admin logs in (successfully) and the api-key is written to his session.
The user never sees his api-key at all and does not have it in the public domain. In this case, the key is in the session
Now he gets to the records management page.
I need him to immediately see the unconfirmed entries, which he must check and confirm. It also displays a filter for those records in front of it.
And this is where my confusion begins.
If I display the first page, I can directly in it:

<? $result = api($data, $_SESSION['api_key']) ?>
<div>
<? foreach ($result as $v): ?>
<p>$v['name']</p>
<p>$v['date']</p>
...
<? endforeach; ?>
</div>

That's where the problems start with filtering. I don't want to reload the page. Can you tell me what it should look like?
My thoughts:
1. I have to create a separate page to which I will send a curl request with filter conditions, which in turn will also send a curl request, but already passing these conditions. Then
it seems to me that this option is "not very" at least because 2 curl requests.
2. The second option is in such a collective farm:

<script>
  let api = '<?=$_SESSION['api_key']?>';
  console.log(api);
  // и здесь будет функция, которая сделает fetch запрос на сервер...
</script>

In this case, the user can see his key, but there will be not 2 requests to the server, but 1. On the one hand, let him see this key, he is already logged in, which means he has all the powers. And on the other hand: I heard somewhere that if a person is even sitting on an https connection, you can catch the data. Or is this data not available? I mean a line in js.

Maybe there is a correct option?

Answer 1

Don't plant a garden. When you click on the "apply filter" button (well, or whatever you have), call something like this:

function getFilteredData(filter = []) {
            $.ajax({
                url: 'site/filterController',
                type: 'POST',
                dataType: 'json',
                data: {
                    filter: filter,
                },
                error: function (e) {
                    // функция если какая-то ошибка
                    console.log(e);
                }
            })
                .done(function (data) {
                    // функция обработки полученных данных
                    console.log(data);
                });
        });

Pass an array with options from the filter form to this function.
Make a script on your server that will accept a request from this function, execute the corresponding curl, and return the filtered records to you in json. You will have to display the received data on the page in the Done callback ...
Something like this ...