Is it possible to load content using AJAX?

Question

PHP

I bring to the site the latest entries from the group in VK in this way:

<?php
  $wall = file_get_contents("http://api.vk.com/method/wall.get?v=5.52&filter=others&domain=***&count=10");
  $wall = json_decode($wall);
  $wall = $wall->response->items;

  for ($i = 0; $i < count($wall); $i++) {
    $user = file_get_contents("http://api.vk.com/method/users.get?v=5.52&user_ids=".$wall[$i]->from_id."&fields=photo_100");
    $user = json_decode($user);
    $user = $user->response;
  echo "<img src='".$user[0]->photo_100."' />".$user[0]->first_name." ".$user[0]->last_name;
    echo "<p><b>".($i + 1)."</b>. <i>".$wall[$i]->text."</i><br /><span>".date("Y-m-d H:i:s", $wall[$i]->date)."</span></p>";
  }
?>

I don’t really understand everything in php, js, ajax at the Google code level. Actually, the question arose, is it possible to add the "More records" button and when clicking on it without reloading the page, get 10 more records with a shift (offset = 10 there is such an option in the VK API) and add these records to the right place (well, let's just say below , under those that have already been withdrawn)?

Something Google does not help, because I can’t formulate the question correctly, or maybe my way of getting data is completely incorrect, I saw that some get records without php but with js.

I would be grateful if you poke in the direction where to dig, thanks.

Answer 1

Thanks Ingush Archakov , I did it like this, while everything works as it should, the only thing I need to do at the end of the script is not offset ++ but add each click by 10, I don’t know the language, I can’t understand how this is done correctly)

var offset = 0;
    $(document).ready(function(){
      $('a.test').click(function(){
        $.ajax({
          url: "test.php",
          method: "GET",
          cache: false,
          data:"offset=" + offset,
          success:function(data){
                console.log(data); 
                $("body").append(data);
              }
            })
        offset++;
        console.log(offset);
      });
    });

So I'm posting the solution to my question, thanks again for pointing me in the right direction.

var offset = 10;
    $(document).ready(function(){
      $('a.test').click(function(){
        $.ajax({
          url: "test.php",
          method: "GET",
          cache: false,
          data:"offset=" + offset,
          success:function(data){
                console.log(data); 
                $("body").append(data);
              }
            })
        offset = offset + 10;
        console.log(offset);
      });
    });

<?php
  $wall = file_get_contents("http://api.vk.com/method/wall.get?v=5.52&filter=others&domain=****&count=10&offset=".$_GET["offset"]);
  $wall = json_decode($wall);
  $wall = $wall->response->items;

  for ($i = 0; $i < count($wall); $i++) {
    $user = file_get_contents("http://api.vk.com/method/users.get?v=5.52&user_ids=".$wall[$i]->from_id."&fields=photo_100");
    $user = json_decode($user);
    $user = $user->response;
  echo "<img src='".$user[0]->photo_100."' />".$user[0]->first_name." ".$user[0]->last_name;
    echo "<p><b>".($i + 1)."</b>. <i>".$wall[$i]->text."</i><br /><span>".date("Y-m-d H:i:s", $wall[$i]->date)."</span></p>";
?>

Answer 2

It is possible and very simple. Using offset and count in the request, send these parameters via AJAX.
Initially, use a variable that stores A strings and B offsets. And when a request for your script comes, get parameters via $_GET and insert them into these variables.
And in JS, on each call, add +N times (n is the number of new entries).