從.ajax（）調用的數據上的jQuery .find（）返回「[object Object]」而不是div

Question

嘗試使用.find()從.ajax()返回的數據中找到div元素，id="result"。不幸的是，alert(result)不返回div#result。

這裏是我的代碼：

$.ajax({ 
    url: url, 
    cache: false, 
    success: function(response) { 
     result = $(response).find("#result"); 
     alert(response); // works as expected (returns all html) 
     alert(result); // returns [object Object] 
    } 
}); 

Answer 1

具體回答你的問題，它似乎正常工作。你說它返回[object Object]，這是jQuery將返回find("#result")方法。它返回一個匹配find查詢的jQuery元素。

嘗試獲取該對象的屬性，如result.attr("id") - 應返回result。

---

一般來說，這個答案取決於#result是否是頂層元素。

如果#result是最高級別的元素，

<!-- #result as top level element --> 
<div id="result"> 
    <span>Text</span> 
</div> 
<div id="other-top-level-element"></div> 

find()將無法​​正常工作。相反，使用filter()：

var $result = $(response).filter('#result'); 

如果#result不是最高級別的元素，

<!-- #result not as top level element --> 
<div> 
    <div id="result"> 
    <span>Text</span> 
    </div> 
</div> 

find()將工作：

var $result = $(response).find('#result'); 

Answer 2

試試這個：

result = $("#result", response); 

BTW alert是一個粗略的方式來調試的東西，嘗試console.log

Answer 3

是#result在響應HTML？嘗試以下操作。如果jQuery沒有找到任何東西，它仍然會返回一個空對象。

alert(result.length); 

Answer 4

您應該將dataType: "html"添加到請求。我相當肯定你不能夠搜索返回的HTML的DOM，如果它不知道它是HTML。

Answer 5

您可能必須做一些像

var content= (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d 

，那麼你應該能夠使用

result = $(content).find("#result") 

Answer 6

jQuery的find（）方法返回一個jQuery的對象，包裝DOM對象。你應該可以使用該對象來完成你想要的div。

Answer 7

指定dataType: "html"。

如果你不jQuery會猜測所請求的數據類型（檢查：http://api.jquery.com/jQuery.ajax/）。我的猜測是，在你的情況下，response是String而不是DOMObject。顯然DOM方法不能在String上工作。

您可以測試與console.log("type of response: " + typeof response)（或alert("type of response:" + typeof response)，如果你不跑螢火蟲）

Answer 8

我只花了3個小時解決類似的問題。這對我來說很有用。

我試圖從我的$.get響應中檢索的元素是body標籤的第一個子元素。出於某種原因，當我圍繞這個元素包裝一個div時，它可以通過$(response).find('#nameofelement')進行檢索。

不知道爲什麼，但沒錯，檢索元素不能被人體的第一個孩子...這可能是有用的人:)

Answer 9

你可以做，在這種方式找到任何股利和獲得它的屬性或任何東西你要。

$(response).filter('#elementtobefindinresponse').attr("id"); 

或

$(response).filter('img#test').attr("src"); 

Answer 10

這就是你的答案：

<div class="test">Hello</div> 
<div class="one">World</div>  

以下jQuery將無法正常工作：

$(data).find('div.test');  

爲div的是頂級元素數據不是一個元素，而是一個字符串，使其工作喲ü需要.filter使用

$(data).filter('div.test');  

另一個同樣的問題： Use Jquery Selectors on $.AJAX loaded HTML?

Answer 11

如果你的Ajax調用返回一個JSON數組，從服務器端JSON字符串， 那麼你應該開始做以下幾點：

$("button#submit").click(function() { 
    $.ajax({ 
     type: "POST", 
     url: "ajax_create_category", 
     data: $('form#create_cat_form').serialize(), 
    success: function(data) 
      { 
      if(data) 
      { 
       var jsonObj = JSON.parse(data); 
       if(jsonObj.status) 
       { 
       $("#message").html(jsonObj.msg); 
       } 
      } 
     } 
     }); 
    }); 

將您的JSON對象解析爲JS對象（變量），然後您可以使用數據的索引來檢索數據！ 希望這會對你們中的一些人有所幫助！ :)

Answer 12

不要忘記用解析html來做。像：

$.ajax({ 
    url: url, 
    cache: false, 
    success: function(response) { 
     var parsed = $.parseHTML(response); 
     result = $(parsed).find("#result"); 
    } 
}); 

有工作:)

Answer 13

這爲我工作，你只需要投入的.html（）在結束 - $（響應）。找到（ 「＃結果」）

Answer 14

你只需要使用下面的代碼

var response= $(result); 

$(response).find("#id/.class").html(); [or] $($(result)).find("#id/.class").html(); 

Answer 15

的事情是，你AJAX響應返回一個串，因此，如果您使用直接$（響應）它會返回JQUERY：未捕獲的錯誤：語法錯誤，無法識別的表示在控制檯中輸入。爲了正確使用它，您需要首先使用名爲$.parseHTML(response)的JQUERY內置函數。正如函數名稱暗示的那樣，您需要首先將字符串解析爲html對象。就這樣，你的情況：

$.ajax({ 
    url: url, 
    cache: false, 
    success: function(response) { 
     var parsedResponse = $.parseHTML(response); 
     var result = $(parsedResponse).find("#result"); 

     alert(response); // returns as string in console 
     alert(parsedResponse); // returns as object HTML in console 
     alert(result); // returns as object that has an id named result 
    } 
}); 

Answer 16

$.ajax({ 
    url: url, 
    cache: false, 
    success: function(response) { 
     $('.element').html(response); 
    } 
}); 

< span class = "element" > 
    //response 
    < div id = "result" > 
     Not found 
    </div> 
</span> 

var result = $("#result:contains('Not found')").text(); 
console.log(result); // output: Not found