使用Ajax和PHP加载内容包括

我有一个包含div的PHP页面，div包含一个包含以下文件的PHP includes：

<?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>

var-page=1；
$（“.Button”）。单击（onClick（））；
$（document）.ready（onClick（））；
函数onClick（）{
警报（“被呼叫”）；
$（“#posts”）.load（“miniBlog.php”，函数（响应、状态、xhr）{
如果（状态=“错误”）{
var msg=“Error！：”；
警报（msg）；
}
});
page++；
}
有什么新鲜事！？

我需要调用函数“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>

---

不要调用
单击方法参数中的函数。您必须将引用放入处理程序函数

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

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

将代码更改为

var page = 1;

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

用这个代替你的代码

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++;
});

内容看起来不会太大。你不能只隐藏div（其中已经有内容）并单击一次显示它。
你无法看到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>


var-page=1；
$（文档）.on（'单击'，'.BlogButton'，函数（e）{
//停止页面重新加载
e、 预防默认值（）；
$（“#posts”）.load（“miniBlog.php”，函数（响应、状态、xhr）{
如果（状态=“错误”）{
var msg=“Error！：”；
警报（msg）；
}
});
page++；
});