0

わかりましたので、私はajaxと外部からのコンテンツのロードにかなり慣れていないので、私の問題についての洞察をいただければ幸いです。

現在、リンクがクリックされた後に ajax コンテンツが読み込まれる場所に、空の非表示の div があります。

<div id="#ajax-wrap"></div>

現在、すべて同じクラスのリンクのリストがあり、クリックすると空白の div がスライド トグルを実行し、リンク先のページからコンテンツをロードしたいと考えています。

リンク：

<a href="always a different url" class="home-right"></a>

現在のjQuery:

$("a.home-right").click(function () {
$('#ajax-wrap').slideToggle();
});

私はAjaxが初めてで、外部コンテンツをロードしているので、#contentタグにあるリンクされたページからコンテンツをロードする方法を知りたいです。基本的に、.home-rightリンクが必要で、#ajax-wrapトグルをスライドすると、Ajax がリンクされたページ (常に別のランダム リンクになります) から#contentコンテンツを取得し、そのコンテンツを div に配置します#ajax-wrap。

助けてくれてありがとう！

4

4 に答える 4

3

リンクに を設定しajaxます。要件：

  1. リンクのハンドラーを作成します。
  2. 誰かがリンク (ページにリダイレクトする) をクリックしたときのブラウザのデフォルトの動作をキャンセルする必要があります。
  3. サーバーから受信した古いデータ ajax を削除し、#ajax-wrap新しいデータを作成します。
  4. ajax 経由でリモート ページを読み込み、 に設定し#ajax-wrapます。
  5. 今それを下にスライドさせます。
// Document Ready
$(function () {

    // attaching click handler to links
    $("a.home-right").click(function (e) {
        // cancel the default behaviour
        e.preventDefault();

        // get the address of the link
        var href = $(this).attr('href');

        // getting the desired element for working with it later
        var $wrap = $('#ajax-wrap');

        $wrap
            // removing old data
            .html('')

            // slide it up
            .slideUp()

            // load the remote page
            .load(href + ' #content', function () {
                // now slide it down
                $wrap.slideDown();
            });
    });

});
于 2013-05-17T04:11:48.273 に答える
1

ajax次のように簡単に使用できます。

$("a.home-right").click(function () {
  $.ajax({
    type: "get",
    url: "YOUR URL HERE",
    success: function(data){
           $('#ajax-wrap').html(data);
          $('#ajax-wrap').slideToggle();
    },
    error: function(){
      alert("An error occured");
    }
  });
});
于 2013-05-17T04:05:15.250 に答える
0

getを使用します。

// Inside click handler
$.get('url_that_returns_data')
  .done(function(response){
    var $response = $(response);
    $('#ajax-wrap').html($response.find('#content')).slideToggle();
  });
于 2013-05-17T04:04:13.027 に答える
0

これを試して：

$(function(){
    $("a.home-right").click(function () {
          $('#ajax-wrap').slideUp();                                  
           var url = $(this).attr("href")                                 
          $.ajax({
            type: "get",
            url: url,
            success: function(msg){
                $('#ajax-wrap').html(msg)        
                $('#ajax-wrap').slideDown();
            },
            error: function(){
              alert("An error occured");
            }
      });
    })

})
于 2013-05-17T04:12:11.830 に答える