JQuery / AJAX: dinamik içerik kullanılarak dış DIV'leri yükleme

5 Cevap php

Ben jQuery ve AJAX kullanarak bir dış sayfasından divs yük olacak bir sayfa oluşturmanız gerekir.

Birkaç iyi eğitimler rastlamak, ama hepsi statik içerik, benim linkler ve içerik PHP tarafından oluşturulan dayanmaktadır.

The main tutorial I am basing my code on is from:
http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/

Aşağıdaki gibi i need tam işlevi:

  1. Ana sayfa bir parametre içeren bazı bağlantıları listeleyen kalıcı bir div içerir.
  2. Tıklama üzerine, bağlantı harici sayfaya parametre geçirir.
  3. Dış sayfa parametresi karşı kayıt filtreleri ve sonuçları ile div doldurur.
  4. Yeni div yeni parametreler ile yeni bir bağlantı kümesi içerir.
  5. Dış div ana sayfaları ilk div altına yüklenir.
  6. İşlem daha sonra birbirinden altında divs zinciri oluşturarak tekrar edilebilir.
  7. Zincirinin son div sonra tüm önceden kullanılan querystrings harmanlama yeni bir sayfaya yönlendirecektir.

I can handle all of the PHP work with populating the divs on the main and external pages.
It's the JQuery and AJAX part i'm struggling with.

$(document).ready(function(){
    var sections = $('a[id^=link_]'); // Link that passes parameter to external page
    var content = $('div[id^=content_]'); // Where external div is loaded to

    sections.click(function(){ 
    	//load selected section
    	switch(this.id){
    		case "div01":
    			content.load("external.php?param=1 #section_div01");
    			break;
    		case "div02":
    			content.load("external.php?param=2 #section_div02");
    			break;			
    	}
});

The problem I am having is getting JQuery to pass the dynamically generated parameters to the external page and then retrieve the new div.
I can currently only do this with static links (As above).

5 Cevap

Ben zaten bu çözdün emin değilim, ama kimsenin ajax kullanmak için belirtilen () fonksiyonu şaşırdım.

Bu GET istek türünü tanımlamak için izin verecek:

function loadContent(id) {

    $.ajax({
    	type: "GET",
    	url: "external.php",
    	dataType: 'html',
    	data: {param: id},

    	success: function(html){
                 $("#container").html(html);
    	},

    	error: function(){
    	},

    	complete: function(){
    	}
    });

}

Sadece yerine yük kullanarak bu işlevini çağırın. Açıkçası kodu (başarı fonksiyonunda gider esas olarak ne) biraz tamircilik gerekir, ama bu iyi bir başlangıç ​​noktası vermelidir.

Sen GET isteği parametrelerini geçmek için isteğe bağlı veri argümanını kullanabilirsiniz. documentation okuyun. Bu URL'yi kendiniz bina daha iyidir. Siz tabii ki dinamik parametreler listesine veri oluşturulan ekleyebilirsiniz.

function loadDiv(evt)
{
    // these params will be accessible in php-script as $_POST['varname'];
    var params = {name:'myDiv', var1:123, var2:'qwer'};
    $.post('http://host/divscript.php', params, onLoadDiv);
}
function onLoadDiv(data)
{
   $('#myContainer').html(data);
}
$(document).ready(function() { 
    $('#divButton').click(loadDiv); 
});

Bu örnekte sunucu tarafı script div iç içerik dönmek gerekir. Emin vb eval XML-serialized veri veya JS dönebilirsiniz .. bu göreve bağlıdır. Basitleştirilmiş bir örnektir, bu yüzden sizin ihtiyaçlarınıza göre bunu genişletmek edilir.

Yükleme AJAX içeriğine Bu öğretici iyidir:

http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

Özellikle parça Kundakçı ile sonuçlarını okumak için nasıl açıklayan.

var params = {
    param: 1,
    otherParam: 2
};
content.load("external.php #section_div01", params);

"external.php? param = 1 & otherParam = 2" yük olacak

etiketler