如何在不更改链接的情况下在同一 php 页面上的分页链接按钮上传递 id？

Question

I want to pass value on php without refresh and link change:

$pagination .= '<li class="page-item"><a class="page-link" href="/demo-project/book?page='.$i.'">'.$i.'</a></li>';

The above code create new url what I don't want, like this: demo-project/book?page=2

I want When I click on link only the page id will go in php, like:

$pagination .= '<li class="page-item"><a class="page-link" data-id="2">'.$i.'</a></li>';

I tried this:

        $pagination .= '<li class="page-item"><button class="page-link" data-id="'.$i.'">'.$i.'</button></li>';

Then index.php

if (isset($_POST['data-id'])) {
$dataid = sanitize($_POST['data-id']);
var_dump($dataid);
}



<script>
$('button').click(function addseries(e){
var i = $(e.currentTarget).attr('data-id');
$.ajax({
  type: "POST",
 url: 'index.php',
 data: i,
 success: function(data) {
 console.log(data);
  }
});

</script>

Nothing is working I tried but this is not working.

I want to send id and then like to get the value in php

but I don't want to create link href with page number in url and then get page number in php.

Any idea or suggestions would be welcome.

Answer 1

You must name the parameter in you request like data: {"id":id}

 $('.page-item').on("click",".page-link",function(){ var i = $(this).attr('data-id'); alert(i); $.ajax({ type: "POST", url: 'index.php', data: {"data-id":i}, success: function(data){ console.log(data); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li class="page-item"><button class="page-link" data-id="5">5</button></li> <li class="page-item"><button class="page-link" data-id="6">6</button></li> <li class="page-item"><button class="page-link" data-id="7">7</button></li>