php - 如何用ajax显示页面？

标签 php jquery ajax mysqli

即使我添加了过滤器以在同一页面上分页更多行，我的分页也能正常工作，也就是说通过过滤器我可以显示 10 或 50 行。

我的代码中的一个小缺陷是重新加载页面，更改显示的行数，分页按钮也会发生同样的情况。

这是我的代码，所有内容都在同一页面上运行index2.php。

<div id="wrapper">
    <div class="container">
        <div id="news-header" class="bootgrid-header container-fluid">
            <div class="row">
                <div class="col-sm-12 actionBar">
                    <div class="search-bar">
                        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="What are you looking for?">
                    </div>
                    <div class="actions btn-group">
                        <?php
                            $select_quantity = '';
                            if (isset($_POST['amount_show'])) :
                                $select_quantity = $_POST['amount_show'];
                            endif;
                        ?>
                        <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
                            <select id="amount_show" name="amount_show" onchange="this.form.submit()">
                                <option value="10" <?php if ($select_quantity==10) echo "selected"; ?>>10</option>
                                <option value="25" <?php if ($select_quantity==25) echo "selected"; ?>>25</option>
                                <option value="50" <?php if ($select_quantity==50) echo "selected"; ?>>50</option>
                                <option value="100" <?php if ($select_quantity==100) echo "selected"; ?>>100</option>
                            </select>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <?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;

            $localization_sql = ($page-1) * $records_by_page;

            $sql = "SELECT id,title,description
                    FROM news
                    ORDER BY id DESC LIMIT $localization_sql, $records_by_page";
            $stmt = $con->prepare($sql);
            $stmt->execute();
            $stmt->store_result();
            if ($stmt->num_rows>0) :

            echo '<table id="myTable" class="table table-condensed table-hover table-striped bootgrid-table">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Title</th>
                    <th>Description</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>';

            $stmt->bind_result($id,$title,$description);
            while ($stmt->fetch()) :
                echo '<tr>
                    <td>'.$id.'</td>
                    <td>'.$title.'</td>
                    <td>'.$description.'</td>
                    <td>Edit</td>
                </tr>';
            endwhile;
            echo '</tbody>';
            echo '</table>';
            $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 '<div class=pagination>
            <ul class="pagination">';
            if ($prev > 0) :
                echo "<li><a href='index2.php?page=1'><i class='icon-angle-double-arrow'></i></a></li>";
                echo "<li><a href='index2.php?page=$prev'><i class='icon-angle-left'></i></a></li>";
            endif;

            for ($i=1; $i<=$total_page; $i++) :
                if ($page==$i) :
                    echo "<li><a class=active>". $page . "</a></li>";
                else :
                    echo "<li><a href='index2.php?page=$i'>$i</a></li>";
                endif;
            endfor;


            if ($page < $total_page ) :
                echo "<li><a href='index2.php?page=$next'><i class='icon-angle-right'></i></a></li>";
                echo "<li><a href='index2.php?page=$total_page'><i class='icon-angle-double-right'></i></a></li>";
            endif;

            echo '</ul></div>';

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

        ?>
    </div>
</div>

在网上搜索时，我发现了一个 ajax 代码，但老实说，我没有管理 ajax 或 javascript/jquery 代码的使用。

你可以解释如何实现这个ajax代码或者如何避免重新加载页面的小缺陷。

<script type="text/javascript">
$(document).ready(function() {  
    $('.pagination li a').on('click', function(){
        /*$('.items').html('<div class="loading"><img src="images/loading.gif" width="70px" height="70px"/><br/>Loading...</div>');*/
        $('.items').html('<div class="loading">Loading...</div>');

        var page = $(this).attr('data');        
        var dataString = 'page='+page;

        $.ajax({
            type: "GET",
            url: "ajax.php",
            data: dataString,
            success: function(data) {
                $('.items').fadeIn(2000).html(data);
                $('.pagination li').removeClass('active');
                $('.pagination li a[data="'+page+'"]').parent().addClass('active');

            }
        });
        return false;
    });              
});    
</script>

我的代码是这样工作的，如下图所示:

enter image description here

最佳答案

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

收集数据

ajax.php

<?php
$data_rows = array();

for ($i = 0; $i < 1000; $i++) {
    $data_rows[] = array(
        "id" => "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

脚本.js

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

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

呈现数据

index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<table id="myTable" class="table table-condensed table-hover table-striped bootgrid-table">
    <thead>
        <tr>
            <th>Id</th>
            <th>Title</th>
            <th>Description</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody id="tbody-insert">

    </tbody>
</table>

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

关于php - 如何用ajax显示页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52747673/

上一篇：未指定 phpcs 版本

下一篇：Javascript : Destroy tippy. js实例

相关文章：

php - Laravel - 更新输入文件中上传的文件

PHP 进行无限查询

javascript - CI 中的 Ajax 问题。获取数据但JQuery显示错误

javascript - 我想获取城市名称的经纬度

javascript - 每次点击更改按钮类和值

javascript - 这个函数如何知道正在传递哪个属性？

php - 在 Chrome Dev Tools 的网络选项卡预览中隐藏信息

javascript - 在 codeigniter 中使用 ajax 时出错

PHP包含文件但 undefined variable

php - 检查 PDO 准备()、执行()是否至少返回一行

©2024 IT工具网  联系我们