道场 - 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。