Question

我想将1个网页中的多个片段引入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');

Answer 1

不是一次加载，而是可以通过一次ajax调用来完成。您可以将ajax（或get / post）的结果加载到新文档中，然后提取所需的部分。

查看jquery加载的来源，可在https://github.com/jquery/jquery/blob/master/src/ajax.js#L133

找到

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有多熟练，所以我不确定你是否需要我拼出所有的步骤，或者这是否能满足你的需要。

Answer 2

这是值得一试的。 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()
    );

});

使用jQuery .load（）加载多个片段

2 个答案: