道場 - dojo.byId（）在Ajax響應

Question

我使用的Dojo支持Ajax的

function handleSubmit(evt, targetUrl, submitForm, updateDiv) { 
      dojo.stopEvent(evt); 
      dojo.xhrPost({ 
       url: targetUrl, 
       handleAs: "text", 
       load: function(response){ 
        updateDiv.innerHTML = response; 
        wireEvents(); 
        return response; 
        }, 
       form: submitForm, 
       error: function(response, ioArgs) { 
        console.error("HTTP status code: ", ioArgs.xhr.status); 
        return response; 
       }    
      }); 
     } 

來自服務器的響應包含比我需要更多的數據。 我希望能夠將此

load: function(response){ 
    updateDiv.innerHTML = response; 
    wireEvents(); 
    return response; 
}, 

替換成類似

load: function(response){ 
     updateDiv.innerHTML = dojo.byId('elemToExtract', response); 
     wireEvents(); 
     return response; 
    }, 

我和Ajax響應的一部分來更新我的網頁。我需要能夠在響應中使用dojo.byId選擇器（使用響應作爲上下文根或類似於我在jQuery中找到的東西）。

你知道我該怎麼做到這一點？

謝謝

Answer 1

最大值&秒..非常感謝！

最後，解決方案基於Massimiliano的建議。

我調整它爲dojo 1.2.3（因爲這個版本也缺少dojo.empty（）函數）。需要調用「results [0] .innerHTML」來從dojo變量中提取dom。然後，在不調用empty（）的情況下，我可以直接替換目標「innerDiv」的innerHTML。這裏的關鍵是dojo.query（）查詢傳遞domNode作爲上下文的樹的能力（對不起。 ..我是新來的道場）。

load: function(response){ 
     var tempDiv = document.createElement("div"); 
     tempDiv.innerHTML = response; 
     var results = dojo.query("[id=elemToExtract]", tempDiv); 
     updateDiv.innerHTML = results[0].innerHTML; 
     wireEvents(); 
     return response; 
}, 

我不知道爲什麼，但檢查「if（results.length）{」給運行時的問題。如果我調試JS，我認爲我添加了一些延遲，它工作正常。問題是，在運行時，它似乎是條件評估爲假的......我不知道爲什麼

再次感謝您

Answer 2

您收到的反應是純文本，通過Ajax調用的參數handleAs定義。如果您想用dojo.byId查詢此響應中包含的標記，則需要將其轉換爲解析的HTML，併爲其創建DOM。爲此，您可以使用響應創建一個臨時html元素;那麼你可以使用dojo.byId提取你需要的部分。

load: function(response){ 
    var tempDiv = dojo.create('div', {innerHTML: response}); 
    updateDiv.innerHTML = dojo.byId('elemToExtract', tempDiv); 
    wireEvents(); 
    return response; 
}, 

編輯：

上面包含錯誤，如dojo.byId需要一個文檔作爲第二個參數，它不接受一個節點（也參見Seth's answer）;此外，它還會返回一個無法分配給innerHTML的Node實例。在一個工作解決方案中，當你有臨時元素時，你需要使用dojo.query提取你需要的部分。然後，您可以使用dojo.place將其粘貼到真實頁面的DOM中。請注意，如果要替換以前的內容，則需要在使用dojo.place之前使用dojo.empty刪除目標節點的所有子項。

load: function(response){ 
    var tempDiv = dojo.create('div', {innerHTML: response}); 
    var results = dojo.query('[id=elemToExtract]', tempDiv); 
    if (results.length) { 
     dojo.empty(updateDiv); 
     dojo.place(results[0], updateDiv); 
     wireEvents(); 
    } 
    return response; 
}, 

請注意，dojo.place和dojo.create函數分別在版本1.2和1.3中添加;如果你有一個以前的版本，它可以使用DOM API來代替：

load: function(response){ 
    var tempDiv = document.createElement('div'); 
    tempDiv.innerHTML = response; 
    var results = dojo.query('[id=elemToExtract]', tempDiv); 
    if (results.length) { 
     dojo.empty(updateDiv); 
     updateDiv.appendChild(result[0]); 
     wireEvents(); 
    } 
    return response; 
}, 

Answer 3

這樣做的問題是，dojo.byId預計，第二個參數的文件。另一個問題是，只有將元素放置在DOM中後，ID纔會「已知」。 （我在這最後一點可能是錯誤的，並且/或者它可能取決於瀏覽器，在我執行的實驗中，dojo.byId直到HTML在DOM中才返回任何東西。）

這就是說，你可以把你的ajax調用返回的數據放在一個隱藏的元素中，然後使用dojo.query就可以完成你想要的任務。

假設你在你的HTML有這樣的：

然後你xhrGet看起來是這樣的：

dojo.xhrGet({ 
    url: 'http://jsbin.com/erawu', 
    handleAs: 'text', 
    load: function(data) { 
     var storage = dojo.byId('storage'); 
     storage.innerHTML = data; 
     var want = dojo.query('#iwant', storage)[0]; // or dojo.query(...).forEach(...) 
     if (want) { 
      dojo.byId('hello').innerHTML = want.innerHTML; 
      // depending on what you want 
      // you could also use dojo.place(want, dojo.byId('hello'), 'first') 
     } 
    }, 
    error: function() { 
     console.log(arguments); 
     console.error('ONOES!'); 
    } 
}); 

這裏有一個working example使用Dojo 1.2。