2010-03-08 29 views
17

Vorrei utilizzare $ .ajax() per richiedere una pagina, ma caricare solo i frammenti di quella pagina. So che puoi specificare quali frammenti di pagina vuoi con .load() ma mi stavo chiedendo se è possibile con $ .ajax?caricamento pagina con Jquery AJAX

+0

Eventuali duplicati di [parte estratto del documento HTML in jQuery] (https://stackoverflow.com/questions/2137811/extract-part-of-html- document-in-jquery) –

risposta

2

È possibile ottenere il frammento via posta, aggiungere l'html a un div con display: nessuno; Quindi utilizzare il selettore per ottenere il frammento desiderato e aggiungerlo alla regione che si desidera visualizzare.

Codice Aria:

<div id="tempRegion" style="display:none;"> 

</div> 

$.ajax({ 
    url: "page.htm", 
    type: "GET", 
    success: function(results){ 

     $('#tempRegion').html(results); 

     ... 

     // Now select fragment, append to display area 
     var fragement = $('#someFragment').html(); 

     $('#displayRegion').html(fragement); 

    }) 

}); 
32

Per quelli di voi che si stanno chiedendo, stoplion si riferisce a questa funzione: Loading Page Fragments (scorrere verso il basso nella pagina):

Il .load metodo() , a differenza di $ .get(), ci consente di specificare una parte del documento remoto da inserire. Questo risultato è ottenuto con una sintassi speciale per il parametro url. Se uno o più caratteri di spazio sono inclusi nella stringa, si presume che la parte della stringa che segue il primo spazio sia un selettore jQuery che determina il contenuto da caricare.

Poiché $ .get() non sembra supportarlo, suppongo che $ .ajax non lo farebbe nemmeno. Un modo semplice per implementare questo potrebbe essere il seguente:

$.ajax({ 
    url: 'http://example.com/page.html', 
    data: {}, 
    success: function (data) { 
     $("#el").html($(data).find("#selector")); 
    }, 
    dataType: 'html' 
}); 

Questo sarebbe l'equivalente di

$("#el").load('http://example.com/page.html #selector'); 

Tuttavia, si noti che la sintassi speciale ('#selector') significa che gli script presenti nella HTML caricato sarà non essere eseguito. Vedere Script Execution nei documenti .load().

+0

Grazie. Questo è stato. – user288423

+3

+1 - Bello! Ottieni tutto in una dichiarazione. –

+1

No, non sono la stessa cosa. '.ajax()' non funzionerà se '# selector' è al livello più alto. –

-3

La soluzione più semplice con il metodo di carico:

$("#menu a").click(function(){ 
    event.preventDefault(); 
    $("#container").load(this.href + " #container p"); 
    return false; 
}); 

utilizzare solo il metodo Ajax per gli script più complessi come distacco o di ottenere da un file di script PHP o JSON altrimenti rallenterà il vostro sito web.

+1

OP sa già che funziona con '.load()', e chiaramente ha bisogno di farlo con '.ajax()', altrimenti non avrebbe chiesto. La tua risposta non affronta la domanda e i tuoi link sono spam, in quanto non riguardano l'argomento in questione. –

1

La risposta corretta per voi è:

$.ajax({ 
    url: 'http://example.com/page.html', 
    data: {}, 
    success: function (data) { 
    $("#el").html($(data).append(data).find("#selector")); 
    }, 
    dataType: 'html' 
}); 
Problemi correlati