Ajax data and $_GET

Question

I've been studying the jquery documentation and about ajax, I'm trying to understand how ajax and php requests work.

I'm trying to turn a normal paging into ajax paging.

How do I use the ajax data and work with it on the server?

The way I tried this one returning in the console like this:

if I click on number 3 for example

currentPage=3&currentPage=1

if I click on number 8

currentPage=8&currentPage=1

and the screen does not change it stays in the same content

AJAX

$('.page-link').click(function (e) {
   e.preventDefault();

   var url = $(this).data('href');

   $.ajax({
         type:"get",
         url: url,
         data: {
            currentPage: 1
         },  
         success: function (response) {

           var html = $('<h1/>', {html : response}).find('#paginacao-ajax');
           $('#paginacao-ajax').html( html )    


         }
   });
})

class.crud.php

public function paginglink($query,$records_per_page)
        {

            $stmt = $this->db->prepare($query);
            $stmt->execute();

            $total_no_of_records = $stmt->rowCount();

            if($total_no_of_records > 0)
            {
                ?><ul class="pagination"><?php
                $total_no_of_pages=ceil($total_no_of_records/$records_per_page);

                $current_page=1;

                if(isset($_GET["currentPage"]))
                {
                    $current_page=$_GET["currentPage"];



                }
                if($current_page!=1)
                {
                    $previous =$current_page-1;
                    echo "<li class='page-item'><a href='#' class='page-link' data-href='currentPage=1'>First</a></li>";
                    echo "<li class='page-item'><a href='#' class='page-link' data-href='currentPage=".$previous."'>Back</a></li>";

                }
                for($i=1;$i<=$total_no_of_pages;$i++)
                {
                    if($i==$current_page)
                    {
                        echo "<li class='page-item'><a href='#' class='page-link' data-href='currentPage=".$i."' style='color:red;'>".$i."</a></li>";
                    }
                    else
                    {
                        echo "<li class='page-item'><ahref='#' class='page-link' data-href='currentPage=".$i."'>".$i."</a></li>";
                    }
                }
                if($current_page!=$total_no_of_pages)
                {
                    $next=$current_page+1;
                    echo "<li class='page-item'><a href='#' class='page-link' data-href='currentPage=".$next."'>Next</a></li>";
                    echo "<li class='page-item'><a href='#' class='page-link' data-href='currentPage=".$total_no_of_pages."'>Last</a></li>";
                }
                ?></ul><?php
            }
        }

Answer 1

$_GET variable will give you only what is exposed on the called url like: - http://yourdomain.com?someParameter=SomeValue&anotherParameter=AnotherValue

Will be:

Array(
   someParameter => SomeValue
   anotherParameter => AnotherValue
}

Essentially your mistake was to declare currentPage on your url and on your data properties. There is no rule that forbid to have the same parameter twice on the url, actually this is common in certain frameworks. As it seams it was not your intention so you should just remove the currentPage:1 from your data property on ajax call.

But for the knowledge, ajax will be no different from a normal form submit, besides the fact that it doesn't require page reload to do so. So you can follow normal behavior from a common form (post or get) and how to get the info on your php code.

You can make the ajax request like this:

$('.page-link').click(function (e) {
   e.preventDefault();

   var url = $(this).data('href');

   $.ajax({
         method:"GET",
         url: url,
         success: function (response) {

           var html = $('<h1/>', {html : response}).find('#paginacao-ajax');
           $('#paginacao-ajax').html( html )    


         }
   });
})

PHP, by default when using $_GET or $_POST variables, will give you only the value of the last parameter defined with the same name.

So if you define tree times the parameter A for example (A=1&A=2&A=3) accessing it with $_GET['A'] will give you result 3.

If you wish to have all the values regarding parameter A you will have to parse the url your self.

Using $_SERVER['REQUEST_URI'] you have access to the url string and can easily explode by "&", and than for each one explodes again by "=" , than create an array with the values from the parameters with the same name. Or any other solution like summing, or whatever is more suitable for you.

Answer 2

In your js code replace currentPage=1 for currentPage=$(this).attr('data-href')

See this sample:

$('.page-link').click(function (e) {
   e.preventDefault();

   var url = $(this).attr('href');
   var page = $(this).attr('data-href');

   $.ajax({
         type:"get",
         url: url,
         data: {
            currentPage: page
         },  
         success: function (response) {

           var html = $('<h1/>', {html : response}).find('#paginacao-ajax');
           $('#paginacao-ajax').html( html )    


         }
   });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class='page-item'><a href='#' class='page-link' data-href='1'>Pag 1</a></li>
<li class='page-item'><a href='#' class='page-link' data-href='2'>Pag 2</a></li>
<li class='page-item'><a href='#' class='page-link' data-href='3'>Pag 3</a></li>
<ul>