2012-01-12 33 views
2

AJAXリクエストだけをリロードして、外部サイトから取得したコンテンツを下のコードで更新するようにしていますか?AJAXリクエストをリンクに再送信しますか?

$(document).ready(function() { 
     var mySearch = $('input#id_search').quicksearch('#content table', { clearSearch: '#clearsearch', }); 
     var container = $('#content'); 
     function doAjax(url) { 
      if (url.match('^http')) { 
       $.getJSON("http://query.yahooapis.com/v1/public/yql?"+ 
        "q=select%20*%20from%20html%20where%20url%3D%22"+ 
        encodeURIComponent(url)+ 
        "%22&format=xml'&callback=?", 
       function (data) { 
       if (data.results[0]) { 
        var fullResponse = $(filterData(data.results[0])), 
         justTable = fullResponse.find("table"); 
        container.append(justTable); 
        mySearch.cache(); 
        $('.loading').fadeOut(); 
       } else { 
        var errormsg = '<p>Error: could not load the page.</p>'; 
        container.html(errormsg); 
       } 
       }); 
      } else { 
       $('#content').load(url); 
      } 
     } 
     function filterData(data) { 
      data = data.replace(/<?\/body[^>]*>/g, ''); 
      data = data.replace(/[\r|\n]+/g, ''); 
      data = data.replace(/<--[\S\s]*?-->/g, ''); 
      data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g, ''); 
      data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g, ''); 
      data = data.replace(/<script.*\/>/, ''); 
      data = data.replace(/<img[^>]*>/g, ''); 
      return data; 
     } 
     doAjax('link'); 
    }); 

今、私はページ全体をリロードするボタンがありますが、ただAJAXリクエストをリロードしたいだけです。これも可能ですか?

編集:詳細を指定する必要があります。それは簡単にAJAXを呼び出すことができますが、すでにそこにある情報を置き換えることはできますか?

答えて

2

は、あなただけの

$("#buttonID").on("click", function() { 
    doAjax("link"); 
}); 

は、上記のdocument.readyコードにそれを追加し、それに応じて、ボタンのIDを設定...]ボタンのクリックで再びdoAjax関数を呼び出す必要があります。

次にあなたが要素にHTMLを追加し、あなたのdoAjax機能で

container.html(justTable); 
+0

すでにある情報を置き換える方法はありますか?申し訳ありませんが、私は手術の詳細を指定する必要があります。 – Charlie

+1

container.append(justTable)の代わりにcontainer.html(justTable) - 既存のデータを置き換えます。 – Archer

+0

ちょうど注: '.on()'はjQuery 1.7で新しく、 '.bind()'と同じです。 http://api.jquery.com/on – Jasper

2

container.append(justTable); 

を変更。あなたが代わりにdoAjax機能が実行されるたびに「リフレッシュ」になり、それにHTMLを追加の要素のHTMLを上書きする場合:

単に変更:

container.append(justTable); 

へ:

container.html(justTable); 

そして、もちろん、clickイベントハンドラを残りの回答のようにリンク(または任意の要素)にバインドすることができます。 clickイベントを適切なスコープ(document.readyイベントハンドラ内)にバインドして、doAjax関数にclickイベントハンドラからアクセスできるようにしてください。

関連する問題