page de chargement framents avec Jquery AJAX

Question

Je voudrais utiliser $ .ajax() pour demander une page, mais charger seulement des fragments de cette page. Je sais que vous pouvez spécifier les fragments de page que vous voulez avec .load() mais je me demandais si c'était possible avec $ .ajax?

Answer 1

Vous pourriez obtenir votre fragment par la poste, ajouter le html à un div avec display: none; Utilisez ensuite le sélecteur pour obtenir le fragment souhaité et l'ajouter à la région que vous souhaitez afficher.

Code aérien:

<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); 

    }) 

}); 

Answer 2

Pour ceux d'entre vous qui se demandent, stoplion fait référence à cette fonction: Loading Page Fragments (défilement vers le bas sur la page):

La méthode .load() , contrairement à $ .get(), nous permet de spécifier une partie du document distant à insérer. Ceci est réalisé avec une syntaxe spéciale pour le paramètre url. Si un ou plusieurs caractères d'espace sont inclus dans la chaîne, la partie de la chaîne qui suit le premier espace est supposée être un sélecteur jQuery qui détermine le contenu à charger.

Puisque $ .get() ne semble pas le supporter, je suppose que $ .ajax non plus. Une simple façon de mettre en œuvre ce serait la suivante:

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

Ce serait l'équivalent de

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

Toutefois, notez que la syntaxe spéciale (« de #selector ») signifie que les scripts présents dans le HTML chargé pas être exécuté. Voir Script Execution dans les documents .load().

Answer 3

La solution facile avec la méthode de charge:

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

Utilisez uniquement la méthode Ajax pour les scripts plus complexes comme l'affichage ou d'obtenir à partir d'un fichier de script PHP ou JSON sinon il va ralentir votre site Web.

Answer 4

La réponse correcte est la suivante:

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