簡單的jQuery ajax示例沒有在返回的HTML中找到元素

我在學習jQuery的ajax函數。我有它的工作，但jQuery沒有找到返回的HTML DOM中的元素。簡單的jQuery ajax示例沒有在返回的HTML中找到元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
    <title>load this</title> 

</head> 
<body> 
    <div id="wrapper"> 
    test 
    </div> 
</body> 
</html>

它提供了兩個警報：在同一文件夾中的jQuery，運行這個頁面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
    <title>runthis</title> 

    <script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script> 

    <script tyle="text/javascript"> 
    $(document).ready(function(){ 
     $('input').click(function(){ 
      $.ajax({ 
       type : "GET", 
       url : 'ajaxtest-load.html', 
       dataType : "html", 
       success: function(data) { 

       alert(data); // shows whole dom 

       alert($(data).find('#wrapper').html()); // returns null 

       }, 
       error : function() { 
        alert("Sorry, The requested property could not be found."); 
       } 
      }); 
     }); 
    }); 
    </script 

</head> 
<body> 
    <input type="button" value="load" /> 
</body> 
</html>

它加載此頁「ajaxtest-load.html」。一個顯示DOM被加載，但第二個顯示NULL而不是#wrapper。我究竟做錯了什麼？

編輯：我加載「ajaxtest-load.html」，其中包括整個標題，包括jquery再次。這是問題嗎？

來源

2009-06-23 user110218

也許清理頂級代碼併發布html上的'ajaxtest-load.html'的樣子 – ScottE 2009-06-23 15:55:50

第二個html代碼塊是ajaxtest-load.html。編輯說明。對於那個很抱歉。 – user110218 2009-06-23 16:27:31

我已經成功地使用從完整的html文檔加載片段。

要創建具有提取HTML的新塊到DOM我這樣做：

$('<div></div>').appendTo('body').load('some-other-document.html div#contents');

如果它不爲你工作，確保你使用的是最新的版本（或發佈1.2）的jQuery 。更多示例請參閱documentation for .load。

編輯：

但是請注意，與上面的例子中，結果將是：

<div><div id="contents">...</div></div>

要得到其他文檔中#contents DIV的內容之外，使用callback-函數在加載函數調用中。

$('<div></div>').load('some-other-document.html div#contents', null, 
    function (responseText, textStatus, XMLHttpRequest) { 
     if (textStatus == success) { 
      $('<div></div>').appendTo('body').html($(this).html()); 
     } 
    } 
);

來源

2009-06-23 17:14:40

爲什麼不試試這個，看看會發生什麼：

$('#testDiv').load('ajaxtest-load.html #wrapper', function(resp) { 
    alert(resp); 
});

從$.load documentation：

在jQuery 1.2中，你現在可以在URL中指定一個 jQuery選擇。這樣做將過濾傳入的HTML 文檔，只注入匹配選擇器的元素。

來源

2009-06-23 16:00:37 karim79

謝謝，但運行，螢火蟲顯示錯誤'$ .load'不是一個函數。 – user110218 2009-06-23 16:31:33

您不能只使用$ .load。你必須在選擇器上使用它，如$（selector）.load（） – 2009-06-23 16:33:43

@T B - 是的，不知道我在想什麼。 @threebttn對不起，試着用它來填滿一個div。看我的編輯。 – karim79 2009-06-23 16:36:42

我發現，如果ajaxtest-load.html沒有< HTML>或< body>標記，但只是很少的HTML元素，它確實工作。

編輯：

如果輸入必須是一個完整的HTML頁面，也許你可以在標籤的第一條你不字符串操作..任何人都想要的嗎？

編輯2：

允許「臨時文件」，你可以在操作和使用從結果依稀記得的JavaScript/DOM，然後有點谷歌搜索得到，我已經適應一個parseHTML功能（http://www.daniweb.com/forums/post874892-2.html）返回正確的位：

$(document).ready(function(){ 
    $('input').click(function(){ 
    $.ajax({ 
     type : "POST", 
     url : 'ajaxtest-load.html', 
     dataType : "html", 
     success: function(data) { 
     alert(data); // shows whole dom 
     var gotcha = parseHTML(data, 'wrapper'); 
     if (gotcha) { 
      alert($(gotcha).html()); 
     }else{ 
      alert('ID not found.'); 
     } 
     }, 
     error : function() { 
     alert("Sorry, The requested property could not be found."); 
     } 
    }); 
    }); 
}); 

function parseHTML(html, idStr) { 
    var root = document.createElement("div"); 
    root.innerHTML = html; 
    // Get all child nodes of root div 
    var allChilds = root.childNodes; 
    for (var i = 0; i < allChilds.length; i++) { 
    if (allChilds[i].id && allChilds[i].id == idStr) { 
     return allChilds[i]; 
    } 
    } 
    return false; 
}

這是否行得通？

來源

2009-06-23 16:37:26 MSpreij

這不是一個直接的答案，但可能有助於澄清事情。

回調函數的數據參數可以做成一個jQuery（1.6.2）對象$（數據），其中包含的響應HTML的不同部分：

東西先於實際文檔，例如文檔類型聲明或可忽略的空白文本節點。
頭元素的內容。
正文元素的內容。

html，head和body元素不在數據對象中。由於包含在頭部和身體中的元素數量可能會有所不同，因此您不應通過像$（data）[2]這樣的索引獲取它們。相反，對此對象應用過濾器，如下所示：

 $.get(
      uri, 
      function(data, textStatus, jqXHR){ 
      var $doc = $(data); 
      var title = $doc.filter('title').text(); 
      // title is the title from the head element. 
      // Do whatever you need to do here. 
      } 
     );

在過濾了正確的元素後，可以使用find（）應用更多的選擇器。

不幸的是，在IE中，head元素不是$（data）的一部分。我不知道這是爲什麼。

來源

2012-03-07 10:15:03 rakensi

簡單的jQuery ajax示例沒有在返回的HTML中找到元素

回答

相關問題