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

您收到的响应是纯文本，由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需要Document作为第二个参数，并且它不接受节点（另请参阅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 2

这个问题是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!');
    }
});

这是使用dojo 1.2的working example。

Answer 3

Max＆amp;谢谢...非常感谢！

最后解决方案基于Massimiliano的建议。

我将它改编为dojo 1.2.3（因为这个版本也缺少dojo.empty（）函数）。需要调用“results [0] .innerHTML”来从dojo变量中提取dom。然后，在不调用empty（）的情况下，我可以直接替换目标“updateDiv”的innerHTML

这里的关键点是dojo.query（）查询将domNode作为上下文传递的树的能力（对不起......我是dojo的新手）。

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我认为我添加了一些延迟，它工作正常。问题是在运行时，似乎条件被评估为假...我不知道为什么

再次感谢您

Dojo - dojo.byId（）通过ajax响应

3 个答案: