0

私は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>

ページを更新したり、javascriptの「page」変数をリセットしたりせずに関数「onclick」を呼び出す必要があります。これまでのところ、スクリプトを1回実行するだけです。コンテンツをロードしていないので、それも間違っていると思います。ページは次のとおりです。

<?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コンテンツだけをロードし、ページ全体を更新しない方法もわかりません。ありがとう！

4

5 に答える 5

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>
于 2012-10-29T08:34:05.920 に答える
0

clickメソッドパラメータで関数を呼び出さないでください。ハンドラー関数への参照を配置する必要があります。

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

$("whatever").click(handler);
于 2012-10-29T08:22:28.533 に答える
0

コードを次のように変更します

var page = 1;

$(document).ready(function(){
     $(".Button").click(onClick);
     onClick();
};
于 2012-10-29T08:24:21.330 に答える
0

コードの代わりにこれを使用してください

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++;
});
于 2012-10-29T08:25:21.937 に答える
0

コンテンツはあまり大きく見えません。divを非表示にして（コンテンツがすでに存在している）、クリックして表示することはできません。

于 2012-10-29T08:27:02.557 に答える