php - 使用 Ajax 和 PHP Include 加载内容

Question

我有一个带有 div 的 PHP 页面，该 div 有一个 PHP 包含，其中包含此文件：

<?php   
    include('mySql.php');
    include('Classes.php');

    $targetPage = "blogOutput.php";
    $noOfPosts = getNumberOfPosts();
    $adjacents = 3;
?>
<link rel="stylesheet" type="text/css" href="Styles/Miniblog.css" />
<script src="Scripts/jQuery.js"></script>
<script type="text/javascript">
    var page = 1;
    $(".Button").click(onClick());
    $(document).ready(onClick());

    function onClick() {
        alert('called');
        $("#posts").load("miniBlog.php", function(response, status, xhr) {
            if (status == "error") {
                var msg = "Error!: ";
                alert(msg);
            }
        });
        page++;
    }

</script>
<div class="PostTitle">
    <h2>What's New!?</h2>
</div>
<div id="posts">
</div>
<a class="BlogButton" href="">Next</a>

我需要调用函数“onclick”而不刷新页面并在javascript中重置“page”变量。到目前为止，我所能做的就是让它运行一次脚本。我认为这也是错误的，因为它没有加载任何内容。这是页面：

<?php
    echo "I'm here!";
    if (isset($_POST['offset'])) {
        $offset = $_POST['offset'];

        $posts = getPosts($offset);
    }
?>

<div class="BlogPost">
    <h3><?php echo $posts[0]->Title; ?></h3>
    <p><?php echo $posts[0]->Body; ?></p>
    <p class="Date"><?php echo $posts[0]->Date; ?></p>
</div>
<div id="divider"></div>
<div class="BlogPost">
    <h3><?php echo $posts[1]->Title; ?></h3>
    <p><?php echo $posts[1]->Body; ?></p>
    <p class="Date"><?php echo $posts[1]->Date; ?></p>
</div>

所以，澄清一下：我不确定为什么我的 ajax 调用不起作用，而且我不知道如何只加载 div 内容而不刷新整个页面。谢谢！

Answer 1

您无法看到 AJAX 加载的内容，因为在您单击锚点后页面正在重新加载。通过使用禁用锚事件preventDefault()，这应该可以解决它。

<script type="text/javascript">
    var page = 1;
    $(document).on('click','.BlogButton',function(e){

        // stop page from reloading
        e.preventDefault();

        $("#posts").load("miniBlog.php", function(response, status, xhr) {
            if (status == "error") {
                var msg = "Error!: ";
                alert(msg);
            }
        });
        page++;
    });
</script>

Answer 2

不要在click方法参数中调用函数。你必须把对处理函数的引用。

var handler = function onClick () {...}

$("whatever").click(handler);

Answer 3

将您的代码更改为

var page = 1;

$(document).ready(function(){
     $(".Button").click(onClick);
     onClick();
};

Answer 4

使用它而不是您的代码

var page = 1;
$(document).on('click','.Button',function(){

    $("#posts").load("miniBlog.php", function(response, status, xhr) {
        if (status == "error") {
            var msg = "Error!: ";
            alert(msg);
        }
    });
    page++;
});

Answer 5

内容看起来不太大。你不能隐藏 div（其中已经存在内容）并在点击时显示它。