web-dev-qa-db-ja.com

jQuery.ajax（）から返されたデータをフィルタリングするにはどうすればよいですか？

jQuery.ajax()メソッドを使用する場合、返されるデータをフィルタリングして必要なものを正確に取得するのに苦労しています。私はこれが.load()とおそらく他のjQuery AJAXメソッドを使用して簡単にできることを知っていますが、特に.ajax()を使用する必要があります。

たとえば、私はこれが機能することを知っています。

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

しかし、id = "foo"のdivのコンテンツが必要な場合はどうなりますか？

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

理想的には、タイトル、div、またはjQueryが選択できるその他の要素を選択するために機能する通常のjQueryセレクターを渡すことができる1つのメソッドが必要です。これは、任意の文字列を自分のajax関数に渡すことができるようにするためです。

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

どんな助けでも大歓迎です。

jqueryajaxfilter
21
smix96

filter()とfind()のどちらを使用するかは、取得したHTMLページの構造によって異なります。たとえば、これが取得されたページである場合：

_<!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>  
_

トップレベルの要素= _<body>_の直接の子である要素を選択する場合-この例では_#wrap_または_#tooltip_-次にfilter()を使用する必要があります。

他の要素を選択したい場合-この例では_#header_、_<h1>_、_#body_、...-そしてfind()を使用する必要があります。

あなたの要素が_<body>_の子かどうかわからないので、次の「ハック」を使用できます。

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

この回避策を使用すると、常にfind()を介して要素を取得できます。

19
Šime Vidas

_jQuery.load_メソッドは次のコードを使用します。

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

つまり、作成したDIVに完全な応答を追加し、その上でfind(selector)を使用します。

だからあなたは次のようなものを見ているは​​ずです：

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

JQueryの観点からのちょっとしたハック！

7
Matt

これは、@ Mattのおかげで機能させることができた方法です

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

完全な_$.ajax_メソッドで提供される特別な機能が必要ない場合は、$.load()を試してみてください。

$ .get（）とは異なり、.load（）メソッドを使用すると、挿入するリモートドキュメントの一部を指定できます。これは、urlパラメータの特別な構文で実現されます。文字列に1つ以上のスペース文字が含まれている場合、最初のスペースに続く文字列の部分は、ロードされるコンテンツを決定するjQueryセレクターであると想定されます。

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

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

1
Volker Rose

使用する

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

これを使用して、HTMLコンセントを返すajax呼び出しの結果をフィルタリングしています

0
Lorenzo