How do I filter the returned data from jQuery.ajax()?
When using the jQuery.ajax() method, I am struggling to filter the data that is returned to get exactly what I need. I know this is easy using .load() and probably the other jQuery AJAX methods but I need to use .ajax() specifically.
For example I know that this works;
var title = $(data).filter('title'); // Returns the page title
But what if I just want the contents of a div with id="foo"?
var foo = $(data).filter('#foo'); // None of these work
var foo = $(data).find('#foo'); //
var foo = $('#foo', data); //
Ideally, I want one method into which I can pass a normal jQuery selector, which will work for selecting titles, divs, or any other开发者_高级运维 element that jQuery can select. This is so that I can pass in any string into my own ajax function - eg;
myApp.ajax({
url: 'myPage.html',
filterTitle: 'title',
filterContent: '#main-content'
});
Any help would be greatly appreciated.
The use of filter() vs. find() depends on the structure of your retrieved HTML page. For example, if this is the retrieved page:
<!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>
If you want to select the top-level elements = elements that are direct children of <body> - in this example: #wrap or #tooltip - then you have to use filter().
If you want to select other elements - in this example: #header, <h1>, #body, ... - then you have to use find().
I you don't know whether your element is a child of <body> or not, you could use this "hack":
$("<div>").html(data).find( selector );
By using this work-around, you always get the elements via find().
The jQuery.load method uses the following code:
// 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 );
}
I.e it appends the full response to a DIV it creates, and then uses find(selector) on that.
So you should be looking at something like:
var foo = $('<div />').html(data).find('#foo'); // This looks like it'll work!
Bit of a hack from jQuery's point of view!
This is how I was able to get it working thanks to @Matt
$.ajax({
type: "GET",
url: url,
dataType: 'html',
success: function(data) {
$('#foo').html(
$('<div />').html(data).find('#foo').html()
);
}
});
If you don't need any special functionality given by the full $.ajax method, you should give $.load() a try:
The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.
$('#result').load('ajax/test.html #container');
http://api.jquery.com/load/#loading-page-fragments
Use
$(data).filter("#foo").text();
I am using this to filter the result of an ajax call that return an HTML conent
加载中,请稍侯......
精彩评论