¿Cómo se filtran los datos devueltos de jQuery.ajax ()?

Cuando uso el método jQuery.ajax() , estoy luchando por filtrar los datos que se devuelven para obtener exactamente lo que necesito. Sé que esto es fácil usando .load() y probablemente los otros métodos jQuery AJAX pero necesito usar .ajax() específicamente.

Por ejemplo, sé que esto funciona;

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

Pero, ¿y si solo quiero los contenidos de un div con id = “foo”?

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

Idealmente, quiero un método en el que pueda pasar un selector jQuery normal, que funcionará para seleccionar títulos, divs o cualquier otro elemento que jQuery pueda seleccionar. Esto es para poder pasar cualquier cadena a mi propia función ajax, por ejemplo;

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

Cualquier ayuda sería muy apreciada.

El uso de filter() vs. find() depende de la estructura de su página HTML recuperada. Por ejemplo, si esta es la página recuperada:

    Foo   
content
tooltip

Si desea seleccionar los elementos de nivel superior = elementos que son hijos directos de – en este ejemplo: #wrap o #tooltip #wrap #tooltip – entonces tiene que usar filter() .

Si desea seleccionar otros elementos, en este ejemplo: #header ,

, #body , … – entonces tiene que usar find() .

Si no sabes si tu elemento es hijo de o no, puedes usar este “hack”:

$("

").html(data).find( selector );

Al utilizar esta solución temporal, siempre obtienes los elementos a través de find() .

El método jQuery.load utiliza el siguiente código:

 // 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("
") // 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 ); }

Es decir, agrega la respuesta completa a un DIV que crea, y luego usa find(selector) en eso.

Entonces deberías mirar algo así como:

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

¡Un truco desde el punto de vista de jQuery!

Así es como pude hacerlo funcionar gracias a @Matt

 $.ajax({ type: "GET", url: url, dataType: 'html', success: function(data) { $('#foo').html( $('
').html(data).find('#foo').html() ); } });

Si no necesita ninguna funcionalidad especial dada por el método $.ajax completo, debe $.load() :

El método .load (), a diferencia de $ .get (), nos permite especificar una parte del documento remoto que se insertará. Esto se logra con una syntax especial para el parámetro url. Si se incluyen uno o más caracteres espaciales en la cadena, se supone que la parte de la cadena que sigue al primer espacio es un selector jQuery que determina el contenido que se va a cargar.

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

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

Utilizar

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

Estoy usando esto para filtrar el resultado de una llamada ajax que devuelve un contenido en HTML