php - 简单的php ajax分页，如何获取请求url

Question

更新 2 18.05.2020

(AJAX) 刷新时的 URL 分页 + window.history.replaceState + window.history.pushState +location.pathname

刷新后Test3

 $(document).ready(function(){  
      load_data(1);      
      function load_data(page)  
      {          
        $('#load_data').html('<div id="status" style="" ></div>');
        $.ajax({
                url:"pagination2.php",  
                method:"POST", 
                data:{page:page},  
                success:function(data){  
                     $('#load_data').html(data);
                } 
           }); 
      }  

      $(document).on('click', '.pagination_link', function(event) 
        {
            event.preventDefault(); 
            var page = $(this).attr("id"); 
            load_data(page);
            //Now push PAGE to URL
            window.history.pushState({page}, `Selected: ${page}`, `${ 'page=' + page}`)
            //window.history.pushState({page}, `Selected: ${page}`, `./selected=${page}`)
            return event.preventDefault(); 
      });
            window.addEventListener('popstate', e => {
            var page = $(this).attr("id");
            load_data(e.state.page);
            console.log('popstate error!');
    });

        //history.replaceState({page: null}, 'Default state', './');
        var params = new URLSearchParams(location.search);
        params.set('page');
        window.history.replaceState({}, "", decodeURIComponent(`${location.pathname}?${params}`));
 }); 

我已经构建了一个有效的 PHP AJAX 分页 -> ajax 分页。

我是 jQuery/ajax 的新手。我无法理解 url 参数的用法。

我的输出：pagination2.php

我想要输出：pagination2.php/page=2,3,4....

有任何想法吗？

我的代码index.php

$(document).ready(function(){ 
      load_data(1);   
      function load_data(page)  
      {          
        $('#load_data').html('<div id="status" style="" ></div>');
        var action = 'pagination2';
        $.ajax({
                url:"pagination2.php",  
                method:"POST", 
                data:{page:page}, 
                complete: function(){
                    alert(this.url)
                },
                success: function(data){  
                     $('#load_data').html(data);
                }, 
           })  
      }  

      $(document).on('click', '.pagination_link', function(event) 
        {
            event.preventDefault();  
            var page = $(this).attr("id"); 
            load_data(page);
            return event.preventDefault();
      });
 }); 

分页2.php

echo "<span class='pagination_link' style='cursor:pointer;' id='".$i."'>".$i."</span>"; 

UPDATE1 我添加了：history.pushState 但我不知道这种方法是否正确。我可以操作下一个 - 返回 /selected=2, selected=3... 但是，另一个问题出现了，刷新后选择消失。测试 2

$(document).ready(function(){ 

      load_data(1);  
      function load_data(page)   
      {   
        $('#load_data').html('<div id="status" style="" ></div>');
        var action = 'pagination2';
        $.ajax({

                url:"pagination2.php",  
                method:"POST",
                error: function(xhr, text){
                alert("Whoops! The request for new content failed");
                     }, 
                data:{page:page},  
                success:function(data){  
                     $('#load_data').html(data);
                }, 
           })  
      }  


      $(document).on('click', '.pagination_link', function(event) pagination
        {
            event.preventDefault(); 
            var page = $(this).attr("id"); 
            load_data(page);
            history.pushState({page}, `Selected: ${page}`, `./selected=${page}`)
            return event.preventDefault();
      });

            window.addEventListener('popstate', e => {
            var page = $(this).attr("id");
            load_data(e.state.page);
            console.log('popstate error!');
    });
        history.replaceState({page: null}, 'Default state', './');
 }); 

标签： phpajax