1

我想将来自 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');
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

不是一次加载，而是一次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 的熟练程度，所以我不确定您是否需要我详细说明所有步骤，或者这是否能满足您的需求。

于 2012-11-19T16:47:23.023 回答