如何用ajax显示页面？

我有一个正常工作的分页,即使我已经添加了一个过滤器来分页同一页面上的更多行,也就是说通过过滤器我可以显示10行或50行.

我在代码中遇到的一个小缺陷就是页面被重新加载,改变了显示的行数,并且在分页的按钮中也是如此.

这是我的代码,一切都在同一页面index2.php上工作.

    

        

            

                

                    

                        
                    
                    

                        
                        ">
                            
                                >10
                                >25
                                >50
                                >100
                            
                        
                    
                
            
        
        prepare($sql);
            $stmt->execute();
            $stmt->store_result();
            if ($stmt->num_rows>0) :

            echo '';

            $stmt->bind_result($id,$title,$description);
            while ($stmt->fetch()) :
                echo '';
            endwhile;
            echo '';
            echo '

            

                

                    
Id
                    
Title
                    
Description
                    
Action
                
            
            

                    
'.$id.'
                    
'.$title.'
                    
'.$description.'
                    
Edit
                
';
            $stmt->close();


            $sql = "SELECT * FROM news";
            $stmt = $con->prepare($sql);
            $stmt->execute();
            $stmt->store_result();

            $BD_records = $stmt->num_rows;
            $stmt->close();
            $con->close();

            $total_page = ceil($BD_records / $records_by_page);
            $prev = $page - 1;
            $next = $page + 1;
            echo '

            
';
            if ($prev > 0) :
                echo "
";
                echo "
";
            endif;

            for ($i=1; $i<=$total_page; $i++) :
                if ($page==$i) :
                    echo "
". $page . "
";
                else :
                    echo "
$i
";
                endif;
            endfor;


            if ($page <$total_page ) :
                echo "
";
                echo "
";
            endif;

            echo '
';

            else :
                $stmt->close();
            endif;

        ?>
    

在网上搜索时,我发现了一个ajax代码,但是真诚地,我没有管理使用ajax或Javascript/jquery代码.

您可以解释如何实现此ajax代码或如何避免重新加载页面的小缺陷.

这就是我的代码的工作方式,如下图所示:

Ajax将在不重新加载页面的情况下更新页面上的信息.我们希望将数据与HTML分开,以便我们可以更改我们看到的数据.如果PHP是将数据写入HTML的工具,我们就无法做到这一点.所以我建议将index2.php分成几个文件.此示例使用JSON.

收集数据

ajax.php

 "id_$i",
        "title" => "title_$i",
        "description" => "description_$i",
    );
}

echo json_encode($data_rows, JSON_PRETTY_PRINT);

这是一些垃圾数据的例子,我不知道你需要什么数据.这里重要的是创建一个所需信息的关联数组,json_encode()数组,然后echo它.重要的是,这是唯一得到回应或印刷的东西!如果您在此脚本中打印了其他任何内容,则无法使用此功能.

编辑:

ajax.php

if (isset($_GET['page'])) :
                $page = $_GET['page'] ?: '';
            else :
                $page = 1;
            endif;

            if (isset($_POST['amount_show'])) :
                $records_by_page = $_POST['amount_show'];
            else :
                $records_by_page = 10;
            endif;

$sql = "SELECT id, title, description
FROM news
ORDER BY id DESC LIMIT $localization_sql, $records_by_page";
$result = $con->query($sql);
$data_rows = array();
while ($row = $result->fetch_assoc()) {
    $data_rows = $row;
}

echo json_encode($data_rows, JSON_PRETTY_PRINT);

您的原始代码包含此mysqli连接,这是我无法访问的数据,因此我无法测试此脚本的功效.但是,这应该显示您询问的所有数据.

使用jQuery的Ajax

的script.js

$(document).ready(function() {  
 $.ajax({
            type: "GET",
            url: "ajax.php",
            dataType: "json",
            success: function(data) {
                tableRows = '';
                for (let i = 0; i 
                        ${data[i].id}
                        ${data[i].title}
                        ${data[i].description}
                        Edit
                    `;
                }
                $("#tbody-insert").html(tableRows);
            }
    });              
}); 

将ajax调用的url参数设置为传递数据的php文件的名称.在我使用JSON的示例中,设置很重要dataType: "json".jQuery会自动为你解析这个.你可以在success参数中看到,data是我们创建的php数组的名称.我使用一个简单的for循环来创建一堆表行,然后将它们插入到我标记过的表体中id="tbody-insert".

提供数据

的index.html

    

        

            
Id
            
Title
            
Description
            
Action
        
    
    


    

我已经从你的索引页面中取出了所有的PHP,它不是很灵活,它需要在更新信息之前重新加载整个页面.要注意的重点是脚本标记,您需要包含jQuery,并且需要包含script.js.您还需要为我们正在插入信息的表体提供一个id.您可以将ajax包装在每次要分页时调用的函数中,并查询ajax.php以查找不同的页面.我不知道你的数据结构,所以我无法继续帮助你.