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>

我需要功能＆＃34; onclick＆＃34;在没有刷新页面的情况下调用并重置＆＃34;页面＆＃34; javascript中的变量。到目前为止，我所能做的就是让它运行一次脚本。我认为这也是错的，因为它没有加载任何内容。这是页面：

<?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（内容已经存在）＆amp;显示它onclick。

使用带有PHP的Ajax加载内容包括

5 个答案: