javascript - 纯 Javascript 中的 jQuery .load template.html

标签 javascript jquery

<分区>

我目前正在加载这样的模板:

$('#mydiv').load("template1.html")

我目前正在使用 jQuery,但我如何才能在纯 Javascript 中做同样的事情?

最佳答案

使用纯javascript ajax并在 onreadychange() 事件中将 mydivinnerHTML 属性设置为 ajax 响应的内容

function loadHTML(myDivId, url) {
    var xmlhttp;
    if (window.XMLHttpRequest) 
    {
        xmlhttp = new XMLHttpRequest();
    } 
    else 
    {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() 
    {
        if (xmlhttp.readyState == XMLHttpRequest.DONE ) 
        {
           if(xmlhttp.status == 200){
               document.getElementById(myDivId).innerHTML = xmlhttp.responseText;
               var allScripts = document.getElementById(myDivId).getElementsByTagName('script');
               for (var n = 0; n < allScripts .length; n++)
               {
                   eval(allScripts [n].innerHTML)//run script inside div generally not a good idea but these scripts are anyways intended to be executed.
               }
           }
           else {
               alert('Error');
           }
        }
    }

    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

loadHTML( "mydiv", "template1.html" );

关于javascript - 纯 Javascript 中的 jQuery .load template.html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34330919/

相关文章:

javascript - 如何阻止 fancybox 调整大小?

javascript - 如何使用 Angular 将新对象添加到现有动态响应

javascript - 如何制作 WordPress 管理导览弹出窗口?

javascript - scriptNode.onaudioprocess 已弃用,还有其他选择吗?

javascript - 提交时进行正则表达式电子邮件验证

jquery - $.mobile.loadPage是否提供回调函数?

javascript - AJAX 调用和更新查询无法正常运行

javascript - 使用 Selenium Webdriver 自动上传文件

javascript - 如何在 OpenLayers 3 中绘制多部分几何图形?

单击按钮时未调用 JavaScript 函数