可以用ajax更新页面

Question

我有一个由查询结果填充的div元素（在index.php中）。 我还有另一个文件widget.php，它具有相同的查询来更新页面。 我在widget.php“页面”中有变量，这些变量可在页面之间导航。 如果我使用widget.php？page = 2，它将加载结果页面。 我想在单击时更新index.php中的div元素。（单击“下一步”，显示另外8条新闻，而无需重新加载页面）。

在index.php中：

<button type="button" id="prevbutton">Previous</button>
<button type="button" id="nextbutton">Next</button>

<div id="list"></div>

在script.js中：

$("#prevbutton, #nextbutton").click(function () {

    var id_name = $(this).attr('id');
    var page = 0;

    if (id_name == '#prevbutton' || id_name == '#nextbutton') {
            if (id_name == '#prevbutton') {
                page -= 1;    
            }
            if (id_name == '#nextbutton') {
                page +=1;
            }    
        }

        $.ajax({
            url: 'widget.php',
            type: 'GET',
            data: "page=" + page,
            success: function (data) {
                //called when successful
                $("#list").html(data);
            },
            error: function (e) {
                //called when there is an error
                //console.log(e.message);
            }
        });
    });

在widget.php中：

<?php
header("Cache-Control: public, max-age=60");
include("logindb.php");
$page = $_GET['page'];
$page = $page*9;
?>
                <div id="list">
                    <?php
                    $abfrage59 = "SELECT n.news_title,n.news_id,FLOOR(TIMESTAMPDIFF(HOUR, n.timestamp, NOW())) as diff
                    FROM news n
                    WHERE n.domain_id = '2' AND n.timestamp < NOW()
                    ORDER BY timestamp DESC
                    LIMIT $page,9";
                    $ergebnis59 = mysql_query($abfrage59);
                    while ($row59 = mysql_fetch_object($ergebnis59)) {

                    $newstitleslug = $row59->news_title;
                    $newstitleslug = str_replace(' ', '-', $newstitleslug);
                    $newstitleslug = strtolower($newstitleslug);

                    echo "<div class=\"col-sm-6 col-md-4\" style=\"padding-bottom: 15px;\">
                            <div class=\"item\">
                                <img class=\"main\" src=\"http://www.example.com/news/$row59->news_id.png\" />
                                <div class=\"text\">
                                    <div class=\"inner\">
                                        <a href=\"http://www.example.com/$newstitleslug/$row59->news_id/\" style=\"color:white;\">$row59->news_title<br />
                                        <span class=\"date\">$row59->diff hours ago</span>
                                    </div>
                                </div>
                            </div>
                        </div>";

                    }
                    ?>
<?php
include("close_connect.php");
?>

所以我想更新点击的价值$ page并用新数据刷新DIV的内容。 提前致谢。

编辑：从script.js中删除脚本，并将其放在index.php主体的末尾：

<script>

    $("#prevbutton, #nextbutton").click(function () {

            var id_name = $(this).attr('id');
            var temppage = 1;

            if (id_name == 'prevbutton' || id_name == 'nextbutton') {
                    if (id_name == 'prevbutton') {
                        temppage -= 1;    
                    }
                    if (id_name == 'nextbutton') {
                        temppage +=1;
                    }
                var page = temppage;
                }


                $.ajax({
                    url: 'widgets/news_archive_widget.php',
                    type: 'GET',
                    data: "page=" + page,
                    success: function (data) {
                        //called when successful
                        $("#list").html(data);
                    },
                    error: function (e) {
                        //called when there is an error
                        //console.log(e.message);
                    }
                });
            });

    </script>

Answer 1

删除前缀为prevButton和nextButton的# ，因为$(this).attr('id')将返回没有#的ID。 id_name的值将是prevButton或nextButton 。

更新：您的最终js脚本应如下所示：

$("#prevbutton, #nextbutton").click(function () {

 var id_name = $(this).attr('id');
 var page = $("#currPageNumber").val();

 if (id_name == 'prevbutton' || id_name == 'nextbutton') {
    if (id_name == 'prevbutton') {
        page -= 1;    
    }
    if (id_name == 'nextbutton') {
        page +=1;
    }    
 }

 $.ajax({
    url: 'widget.php',
    type: 'GET',
    data: "page=" + page,
    success: function (data) {
        //called when successful
        $("#list").html(data);
    },
    error: function (e) {
        //called when there is an error
        //console.log(e.message);
    }
  });
 });

PHP脚本：

<?php
header("Cache-Control: public, max-age=60");
include("logindb.php");
$page = $_GET['page'];
$page = $page*9;
?>
<div id="list">
    <?php
        $abfrage59 = "SELECT n.news_title,n.news_id,FLOOR(TIMESTAMPDIFF(HOUR, n.timestamp, NOW())) as diff
        FROM news n
        WHERE n.domain_id = '2' AND n.timestamp < NOW()
        ORDER BY timestamp DESC
        LIMIT $page,9";
        $ergebnis59 = mysql_query($abfrage59);
        while ($row59 = mysql_fetch_object($ergebnis59)) {

        $newstitleslug = $row59->news_title;
        $newstitleslug = str_replace(' ', '-', $newstitleslug);
        $newstitleslug = strtolower($newstitleslug);

        echo "<div class=\"col-sm-6 col-md-4\" style=\"padding-bottom: 15px;\">
                <div class=\"item\">
                    <img class=\"main\" src=\"http://www.example.com/news/$row59->news_id.png\" />
                    <div class=\"text\">
                        <div class=\"inner\">
                            <a href=\"http://www.example.com/$newstitleslug/$row59->news_id/\" style=\"color:white;\">$row59->news_title<br />
                            <span class=\"date\">$row59->diff hours ago</span>
                        </div>
                    </div>
                    <input type='hidden' value='".$_GET['page']."' id='currPageNumber'>
                </div>
            </div>";

        }
    ?>
<?php
include("close_connect.php");
?>