-1

このようなことを達成したい。ここでは、下にスクロールすると、ページに新しいコンテンツが自動的に読み込まれます。ページの下部にあるハイパーリンクをクリックして、新しいデータ セットを取得したいと考えています。

AJAX の初心者である私は、私のものに似たこの質問をチェックしていましたが、機能していません。コードを実行したときに得られるのは空のオブジェクトだけです。私のファイルのコードは次のとおりです。

index.php

<a href="about.php">About Me</a> <br>
<a href="contact.php">Contact Me</a>
<div class="wrap"></div>

<script>
    (function(){
        var wrap = $('div.wrap');
        $('a').on('click', function(e){
            var href = $(this).attr('href');
            $.get(href, function(data){
                console.log($(data).find('div.container'));
                $(data).find("div.container").appendTo(wrap);
            });
            e.preventDefault();
        });
    })();
</script>

about.php

</div>
<div class="container">
    <h2>About Me</h2>
    <p>I suck at AJAX ! :-(</p>
</div>

contact.php

<div class="container"><h1>Contact!</h1>
  <form action="#">
  <textarea name="content" id="content" cols="30" rows="10"></textarea>
  <input type="url" name="url" id="url">
  <p><button type="submit">Save</button></p>
  </form>
</div>

スクリーンショット:

空のオブジェクトのスクリーンショット

何か不足していますか？イベント.get()のコールバック関数内で動作しますか? click()しかし、それはうまくいき.load()ます...大きな投稿で申し訳ありませんが、私はここで完全に途方に暮れています! ：/ 私を助けてください？

4

2 に答える 2

1 
(function(){
    var wrap = $('div.wrap');
    $('a').on('click', function(e){
        var href = $(this).attr('href');
        $.get(href, function(data){
            console.log($(data).filter('div.container'));
            wrap.append($(data).filter(".container"));
        });
        e.preventDefault();
    });
})();
于 2012-09-02T14:01:24.117 に答える
1

機能しない理由について$.get()は、返されたデータを DOM トラバーサル手法で使用できるようにする必要があります。

(function(){
    var wrap = $('div.wrap');
    $('a').on('click', function(e){
        e.preventDefault();
        var href = $(this).attr('href');
        $.get(href, function(data){
            var $content = $('<div />').html(data);
            console.log( $content.find('div.container') );
            $content.find("div.container").appendTo(wrap);
        });
    });
})();

jsFiddle Demo$.postの代わりにjsFiddle のテスト リソースが必要であることに注意してください$.get。ただし、原則は同じです。

.load()（jsFiddle demo ） を使用して達成された同様のこと：

(function(){
    var wrap = $('div.wrap');
    $('a').on('click', function(e){
        e.preventDefault();
        var href = $(this).attr('href');
        $('<div />')
            .load(href +' div.container')
            .appendTo(wrap)
            .children(':first-child')
            .unwrap();
    });
})();​
于 2012-09-02T14:01:35.317 に答える