使用 Ajax 和 PHP Include 加载内容答案

【问题标题】：Loading Content using Ajax with PHP Include使用 Ajax 和 PHP Include 加载内容
【发布时间】：2012-10-29 08:19:26
【问题描述】：

我有一个带有 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 内容而不刷新整个页面。谢谢！

【问题讨论】：

标签： php javascript jquery ajax

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

将您的代码更改为

var page = 1;

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

【讨论】：

【解决方案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++;
});

【讨论】：

【解决方案5】：

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

【讨论】：