javascript - ajax 响应中未调用 Dojo 就绪函数

标签 javascript ajax jsp dojo

我有两个以这种方式定义的表单

Home.jsp:-

 <!DOCTYPE html>
 <html>
 <head>
 <style type="text/css">
 @import "../Script/dojo-1.10/dijit/themes/claro/claro.css";
 </style>    
 <script type="text/javascript">
 dojoConfig = {
    isDebug: true,
    parseOnLoad : true
 }
 </script>
 <script type="text/javascript" lang="JavaScript" src="../Script/dojo-1.10/dojo/dojo.js"></script>
 <script type="text/javascript">
 require(["dojo/parser","dijit/form/Button",      
 "dojo/domReady!"],function(parser){
  //parser.parse();
  alert("From Require");
  });
  function getWelcomeJsp(){
  var loadResponse = dojo.byId("loadResponse");
   dojo.xhrPost({
        url:"Welcome.jsp",
        handleAs:"text",
        load:function(data){
        dojo.style(loadResponse,"display","block");
        loadResponse.innerHTML = data;
        return data;
    },
    error:function(err){
        alert("error"+err);
    }
    });
    }
    </script>
    </head>
    <body class="claro">
   <table>
   <tr><td valign="bottom">
   <a href="Welcome.jsp">This Is Hyperlink</a>
   </td></tr>
   <tr>
   <td>
   <label for="empId">EmpId:</label>
   <input id="empId" data-dojo-type="dijit/formTextBox"         
   type="text"/>
   </td></tr><tr><td>
   <button data-dojo-type="dijit/form/Button" id="buttonId"   onclick="getWelcomeJsp();">Send</button>
   </td></tr></table>
   <div id="loadResponse"></div>
   </body></html>

Welcome.jsp:-

   <!DOCTYPE html>
   <html><head>
   <style type="text/css">
      @import "../Script/dojo-1.10/dijit/themes/claro  /claro.css";</style> 
   <script type="text/javascript"  lang="JavaScript"          src="../Script/dojo-1.10/dojo/dojo.js">   </script>
    <script type="text/javascript"  lang="JavaScript">
    require(["dojo/parser","dojo/ready"],function(parser,ready){
    dojo.ready(function(){
        parser.parse();
        alert("From Ready");
    });
    });
   function myfunction(){
        alert("from welcomedd JSP");
   }
   </script></head>
   <body class="claro" onload="myfunction();">
   This Is Welcome JSP
   <button id="responseButton" data-dojo-type="dijit/form /Button" onclick="myfunction();">Response Button</button>
   </body></html>

是的,当我使用dojo 1.9版本点击Home.jsp中的超链接时,Welcome.jsp会被很好地填充,Welcome.jsp中的ready函数也会被调用,并且所有dojo小部件都会被编译。

当我尝试通过 Home.jsp 的 ajax 调用加载 Welcome.jsp 时,出现了问题。

Welcome.jsp 正在加载,但 Welcome.jsp 中的就绪函数和 onload 函数没有被调用,这可能是 ajax 响应中的问题。 我只是无法理解这里面临的问题,请让我知道任何解决方案。

最佳答案

出于安全原因,当您使用 AJAX 添加脚本并将内容设置为内部 HTML 时,Web 浏览器不会评估脚本。

您有几个选项可以解决这个问题:

  1. 如果您只需要加载一些小部件,则可以使用 dijit/layout/ContentPane 小部件并设置 href 属性。这将使用 AJAX 检索内容并自动解析所有小部件。

  2. 如果您确实想在页面上执行脚本,则必须使用eval(),请查看此答案以获取更多信息:Can scripts be inserted with innerHTML?
    它实际上意味着您必须循环遍历动态内容上的所有脚本并对它们使用 eval()

  3. 在页面上执行脚本并解析其中的所有小部件的更简单方法是查看 dojox/layout/ContentPane 模块。它的工作原理与 dijit/layout/ContentPane 模块类似,但有一点不同:它添加了一个属性executeScripts,您可以使用它来评估页面上的脚本。例如:

<div id="loadResponse" data-dojo-type="dojox/layout/ContentPane"
    data-dojo-props="href: 'welcome.jsp', executeScripts: true"></div>

关于javascript - ajax 响应中未调用 Dojo 就绪函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24796464/

相关文章:

javascript - Ajax提交不起作用

java - struts2中如何动态设置url标签的 "value"属性?

javascript - 获取 daterangepicker bootstrap 的值

javascript - 如何在选择选项中使用复选框? react 钩子(Hook)

jQuery 整个 HTML 页面使用微调器加载

Javascript 变量似乎是静态的

java - 根据第一个选择框的选择填充第二个选择框

javascript - 过滤 Javascript/Lodash 中的嵌套属性

javascript - 如何使增强的 for 循环只查看实际的数组内容

javascript - 播放音频的定义部分