1

1 つの Web ページから複数のフラグメントを div に取り込みたいのですが、それを機能させる唯一の方法は、複数の .load() 関数を使用することです。

以下を1つのhtmlリクエストに単純化する方法はありますか?

$('.quickview-dialog-left').load('/productlargetest .productlargeimage img');
$('.quickview-dialog-right').append('<div class="top"><div class="title"></div><div class="price"></div><div class="delivery"></div></div><div class="bottom"><div class="shortdescription"></div><div class="options"></div><div class="buttons"><div class="buy"></div><div class="viewmore">More Details</div></div></div><div class="close">[x] close</div>');
$('.quickview-dialog-right .title').load('/productlargetest .productrighttop h1');
$('.quickview-dialog-right .price').load('/productlargetest .productprice');
$('.quickview-dialog-right .delivery').load('/productlargetest .productrighttop .stock-delivery');
$('.quickview-dialog-right .bottom .shortdescription').load('/productlargetest .shortdescription');
$('.quickview-dialog-right .bottom .options').load('/productlargetest .productoption');
$('.quickview-dialog-right .bottom .buttons .buy').load('/productlargetest .productSubmitInput');
4

2 に答える 2

1

ここに試してみるものがあります。 http://jsfiddle.net/ZWsLA/1/

//do a 'get' here ONCE, this will get your page as an HTML string
$.get("/HEaUk/1/show/", function(data1){

    //store that HTML string in some hidden div local on the page.  The reason that I store is locally in a DIV is because jQuery seems to be able to parse it much easier.
    $("#everything").html(data1);

    //now you can just use the 'find' method to grab whatever you want from your html and append, or insert into whatever you want.
    $(".quickview-dialog-left").html(
        //use your normal jQuery selector here to 'find' the elements that you need
        $("#everything").find('#productlargeimage').text()
    );

    //here is an example with 'append', but at this point you can do whatever you want with your selectors
    $(".quickview-dialog-right").append(
        $("#everything").find('#productrighttop').text()
    );

});
于 2012-11-19T21:17:52.773 に答える
0

1回のロードではありませんが、1回のajax呼び出しで実行できます。ajax(またはget/ )の結果を新しいドキュメントに読み込んで、post必要な部分を引き出すことができます。

https://github.com/jquery/jquery/blob/master/src/ajax.js#L133にある jquery の負荷のソースを見てください。

jQuery.fn.load = function( url, params, callback ) {
if ( typeof url !== "string" && _load ) {
return _load.apply( this, arguments );
}

// Don't do a request if no elements are being requested
if ( !this.length ) {
return this;
}

var selector, type, response,
self = this,
off = url.indexOf(" ");

if ( off >= 0 ) {
selector = url.slice( off, url.length );
url = url.slice( 0, off );
}

// If it's a function
if ( jQuery.isFunction( params ) ) {

// We assume that it's the callback
callback = params;
params = undefined;

// Otherwise, build a param string
} else if ( params && typeof params === "object" ) {
type = "POST";
}

// Request the remote document
jQuery.ajax({
url: url,

// if "type" variable is undefined, then "GET" method will be used
type: type,
dataType: "html",
data: params,
complete: function( jqXHR, status ) {
if ( callback ) {
self.each( callback, response || [ jqXHR.responseText, status, jqXHR ] );
}
}
}).done(function( responseText ) {

// Save response for use in complete callback
response = arguments;

// 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( responseText.replace( rscript, "" ) )

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

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

});

return this;
};

これを考慮して、読み込み場所 ( ) の下部に注意してください。self.html(...)その後、セレクターを使用して一時selfドキュメントから最終ドキュメントにコピーします。あなたが jquery にどれほど精通しているかはわかりませんので、すべての手順を詳しく説明する必要があるのか​​ 、それとも必要なものが得られるのかわかりません.

于 2012-11-19T16:47:23.023 に答える