5

サーバーから新しいコンテンツを取得するために jQuery の AJAX を使用しています。データは JSON で読み込まれます。

$.ajax({
    url: url,
    data: {
        'ajax': '1',
    },
    dataType: 'json',
    success: somefunction
});

サーバー側のアプリケーションの制限により、内部でこれ以上 JSON 変数をセットアップできないため、すべてをコンテンツにロードする必要があります。そのため、次のように、ページ上のいくつかの要素を検索して置換するよりも、結果を jQuery にロードする必要があります ( で使用somefunction):

var somefunction = function(data) {
    var con = $('<div></div>').html(data.content); // just $(data.content) is not working
    $('div#mainContent').html(con.find('div#ajax-content').html());
    ... // same process with three more divs
}

編集: 3 つの div を置き換えるには、同じプロセスを実行する必要があることに注意してください!

それについてはもっとありますが、例としては、それで十分だと思います。私の質問: 論理的な方法として、結果を DOM ( $(data.content)) にロードし、html ( con.find('dix#ajax-content').html()) に解析して DOM ( ) に戻すと、$('div#mainContent').html()一部のリソースが失われ、パフォーマンスが低下するように見えるので、何かあるかどうかを知りたいと思います次のように、それを実行してDOMを直接ロードするより高速な方法：

$('div#mainContent').dom(con.find('div#ajax-content').dom());

私はそれをグーグルで検索しようとしましたが、おそらく何を入力すればよいかわかりません.また、jQueryのドキュメントはあまり役に立ちません.

いくつかの事実：

  • jQuery1.9.1
  • jQuery UI 1.10.3 が利用可能

最後に、より多くの JSON 変数を提供するためにサーバー側アプリで何かを行う方がはるかに優れていることはわかっていますが、開発に時間がかかる、それほど簡単ではない平和なコードを作成する必要があります。今はありません。クライアント側でそれを行うことは、今のところ一時的な解決策ですが、パフォーマンスを大幅に低下させたくありません。

補足質問:

find()この場合、関数を使用するのは正しいですか、それとももっと良いものがありますか?

EDIT 2（文字列の解析が機能していません） これが機能することを期待していますが、そうではありません：

content = '<div id="ajax-title">Pečivo běžné, sladké, slané</div>
<div id="ajax-whereami"><a href="/category/4">Chléba a pečivo</a> » Pečivo běžné, sladké, slané</div>';
$(content);
4

3 に答える 3

2

これが役立つかどうかはわかりません：

$('div#mainContent').replaceWith(con.find('div#ajax-content'))
 .attr("id","mainContent")

これで、要素の html を設定して、JSON から作成したばかりの要素の html を取得する必要がなくなりました。これが実際に高速かどうかはわかりませんが、2 つの html() ステップをスキップします。

于 2013-05-21T01:55:45.980 に答える
1

実際に$(data.content)は問題なく動作するはずですが、最上位の要素にはではなく経由でしかアクセスできないことに.filter().find()注意してください。ターゲットにしたい要素がルートよりも少なくとも 1 レベル深い場合は、使用する必要が.find()あります。.filter()以下の例では、必要に応じて置き換えることができ.find()ます。

var $con = $(data.content);
$('div#mainContent')
  .empty()
  .append($con.filter('div#ajax-content'))
  .append($con.filter('div#another-id'))
  .append($con.filter('div#and-another-id'));

セレクターを組み合わせることもできます。

  .append($con.filter('div#ajax-content, div#another-id, div#and-another-id'));

最後に、識別子はドキュメント内で 1 回しか表示されないため、そのdiv部分を削除できます。

  .append($con.filter('#ajax-content, #another-id, #and-another-id'));

アップデート

さて、data.content間違った場所に改行があると、jQuery は適切に評価されないようです。これはすべての場合に機能するはずです：

var wrapper = document.createElement('div');
wrapper.innerHTML = data.content;

var $con = $(wrapper);
于 2013-05-21T01:53:32.197 に答える
0

を使用できますが.load、基本的には同じもののラッパーにすぎないと思います。

$("#mainContent").load(url + " #ajax-content", data);

難しいかもしれませんが、特定の ajax コンテンツのみを送信する (ダウンロードして解析する必要が少ない) ことで、サーバー側のパフォーマンスを向上させることができます。

それ以外では、少なくとも追加 (innerHTML直接使用) には、jQuery でバニラ JS を使用することをお勧めします。

于 2013-05-21T01:51:33.140 に答える