终止jQuery().load()函数

Question

jQuery 库的 .load() 函数可以让你选择性地从另一个页面加载元素（需遵守某些规则）。我想知道是否可能中途终止加载过程。

在我们的应用程序中，用户可以浏览项目列表。如果他们选择点击按钮并从另一文档加载和显示有关项目的其他信息（可能需要一些时间），则在仍在进行 .load() 过程时选择列表中的其他项目，我希望加载被中止。

这可行吗？值得吗？有任何想法？

Dan

- Daniel Situnayake

Answer 1

你无法直接使用.load()完成此操作，因为它返回用于链式操作的jQuery对象。但是，如果你改用完整的$.ajax()调用和.html()，你可以这样做：

var xhr = $.ajax({
            url: 'mypage.htm',
            success: function(data) {
              $("#myElement").html(data);
            }
          });
//if needed, abort the request later..
xhr.abort();

这个例子使用.abort()方法来中止XMLHttpRequest对象的加载。

- Nick Craver

Answer 2

尼克的回答几乎满足了我的需求，但还不够。我正在使用.load()方法从网页上仅加载一张图片。因此，在尼克的回答基础上进行扩展...

所以，不再使用...

$('#myElement').load('mypage.htm #myImage');

我现在正在使用...

var xhr = $.ajax({
            url: 'mypage.htm',
            success: function(data) {
              $("#myElement").html($(data).find("#myImage"));
            }
          });
//if needed, abort the request later..
xhr.abort();

- Homer

---

这对我不起作用...我认为问题在于 .find...是否有其他选项可以探索以获取特定的 div...而不使用 .load？ - justcode

$.ajax 会为你返回数据吗？ - Homer

是的，如果我只是执行$("#myElement").html(data)，它会这样做...但是当我添加.find时...没有返回任何内容，我确定调用成功了。 - justcode

听起来返回的HTML没有你要找的元素。data应该包含_mypage.htm_的HTML。$(data).find("#myImage")正在搜索具有id _myImage_的元素的HTML。 - Homer

我将（数据）转储到屏幕上，它包含我需要的页面...但是.find似乎无法在页面中找到该ID。 我有 $（“#google_books_result”）。html（$（data）.find（“＃google_books_resp”））; 而div是<div id="google_books_resp">something</div>。 - justcode

Answer 3

$("#myElement").load("/mypage #mayImage", function(response, status, xhr) {
  if (status == "error") {
     xhr.abort();
  }
});

应该像这样工作...

或者在另一个事件上，我发送了一个验证到一个长字段，用户更改了内容，我想停止之前的检查以重新检查：

xhr.abort();

$("#myElement").load("/mypage #mayImage", function(response, status, xhr) {
  if (status == "error") {
    xhr.abort();
  }
});

- Lucile

Answer 4

您可以通过手动使用jQuery.ajax来实现此操作。它将返回一个XMLHttpRequest对象，您可以根据需要调用abort。在成功处理程序中，您可以使用jQuery.html。

- Matthew Flaschen