web-dev-qa-db-fra.com

Comment filtrer les données renvoyées par jQuery.ajax ()?

Lorsque j'utilise la méthode jQuery.ajax(), je peine à filtrer les données renvoyées pour obtenir exactement ce dont j'ai besoin. Je sais que c'est facile avec .load() et probablement les autres méthodes jQuery AJAX, mais je dois utiliser .ajax() spécifiquement.

Par exemple, je sais que cela fonctionne.

var title = $(data).filter('title'); // Returns the page title

Mais que se passe-t-il si je veux juste le contenu d'une div avec id = "foo"?

var foo = $(data).filter('#foo'); // None of these work
var foo = $(data).find('#foo');   //
var foo = $('#foo', data);        //

Idéalement, je veux une méthode dans laquelle je peux passer un sélecteur jQuery normal, qui fonctionnera pour la sélection de titres, de divs ou de tout autre élément que jQuery peut sélectionner. C'est pour que je puisse passer n'importe quelle chaîne dans ma propre fonction ajax - par exemple;

myApp.ajax({
    url: 'myPage.html',
    filterTitle: 'title',
    filterContent: '#main-content'
});

Toute aide serait grandement appréciée.

jqueryajaxfilter
19
smix96

L'utilisation de filter() et de find() dépend de la structure de votre page HTML récupérée. Par exemple, s'il s'agit de la page récupérée: 

<!DOCTYPE html>

<html>

<head>
    <title>Foo</title>
</head>

<body>
    <div id="wrap">
        <div id="header">
            <h1>Foo</h1>
        </div>
        <div id="body"> content </div>
    </div>
    <div id="tooltip"> tooltip </div>
</body>

</html>

Si vous souhaitez sélectionner les éléments de niveau supérieur = les éléments qui sont des enfants directs de <body> - dans cet exemple: #wrap ou #tooltip -, vous devez utiliser filter(). 

Si vous souhaitez sélectionner d'autres éléments - dans cet exemple: #header, <h1>, #body, ... -, vous devez utiliser find(). 

Si vous ne savez pas si votre élément est un enfant de <body> ou non, vous pouvez utiliser ce "hack": 

$("<div>").html(data).find( selector ); 

En utilisant cette solution de contournement, vous obtenez toujours les éléments via find().

18
Šime Vidas

La méthode jQuery.load utilise le code suivant:

// If successful, inject the HTML into all the matched elements
if ( status === "success" || status === "notmodified" ) {
  // See if a selector was specified
  self.html( selector ?
    // Create a dummy div to hold the results
    jQuery("<div />")
      // inject the contents of the document in, removing the scripts
      // to avoid any 'Permission Denied' errors in IE
      .append(res.responseText.replace(rscript, ""))

      // Locate the specified elements
      .find(selector) :

    // If not, just inject the full result
    res.responseText );
}

C'est-à-dire qu'il ajoute la réponse complète à une DIV qu'il crée, puis utilise find(selector) pour cela.

Donc, vous devriez regarder quelque chose comme:

var foo = $('<div />').html(data).find('#foo'); // This looks like it'll work!

Un peu de piratage du point de vue de jQuery!

7
Matt

C’est ainsi que j’ai pu le faire fonctionner grâce à @Matt

$.ajax({
    type: "GET",
    url: url,
    dataType: 'html',
    success: function(data) {
        $('#foo').html(
            $('<div />').html(data).find('#foo').html()
        );
    }
});
2
John Magnolia

Si vous n'avez besoin d'aucune fonctionnalité spéciale donnée par la méthode complète $.ajax, vous devriez essayer $.load():

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'espacement 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.

$('#result').load('ajax/test.html #container');

http://api.jquery.com/load/#loading-page-fragments

1
Volker Rose

Utilisation 

$(data).filter("#foo").text();

J'utilise ceci pour filtrer le résultat d'un appel ajax renvoyant un contenu HTML

0
Lorenzo