Javascript 我需要将.load（）等效为JS_Javascript_Jquery_Function

Javascript 我需要将.load（）等效为JS

javascript jquery function

Javascript 我需要将.load（）等效为JS,javascript,jquery,function,Javascript,Jquery,Function,我正在开发一个脚本，但我不能使用jQuery库，所以我需要JS中的.load（）等效项我需要在没有jQuery的情况下执行此操作： $(document).ready(function(){ $('#a').click(function(){ $('body').append('<div id="b"></div>') $('#b').load('x.html') }); }); $（文档）.ready（函数（）{ $（'#a'）。单击（函数（）{ $

我正在开发一个脚本，但我不能使用jQuery库，所以我需要JS中的.load（）等效项

我需要在没有jQuery的情况下执行此操作：

$(document).ready(function(){

$('#a').click(function(){
   $('body').append('<div id="b"></div>')
   $('#b').load('x.html')
});

});

$（文档）.ready（函数（）{
$（'#a'）。单击（函数（）{
$（'body'）。附加（“”）
$（'#b'）.load（'x.html'））
});
});

谢谢

如果你想在没有JS的情况下完成，我想这会对你有所帮助，在

#b

更新：将Fetch API与.then（）一起使用

函数加载（url、元素）
{
获取（url）。然后（res=>{
element.innerHTML=res；
});
}

旧XMLHttpRequest

函数加载（url、元素）
{
req=新的XMLHttpRequest（）；
请求打开（“GET”、url、false）；
请求发送（空）；
element.innerHTML=req.responseText；
}

用法

load（“x.html”，document.getElementById（“b”）；

简单的答案是，如果没有像jQuery这样的库，您所做的事情相当复杂，无法正确完成。这是一个“有效”的东西，但没有错误检查或跨浏览器的完美。你可能真的不想要这个。。。但是在这里

<!DOCTYPE html>
<html>
<head>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('a').addEventListener('click', function (e) {
                e.preventDefault();

                var div = document.createElement('div');
                div.id = 'b';
                document.body.appendChild(div);

                var xhr = new XMLHttpRequest();

                xhr.onload = function () {
                    div.innerHTML = this.response;
                };

                xhr.open('GET', 'x.html', true);
                xhr.send();
            }, false);
        }, false);
    </script>
</head>
<body>
    <a id="a" href="#">load</a>
</body>
</html>


document.addEventListener（'DOMContentLoaded'，函数（）{
document.getElementById（'a'）。addEventListener（'click'，函数（e）{
e、 预防默认值（）；
var div=document.createElement（'div'）；
div.id='b'；
文件.正文.附件（div）；
var xhr=new XMLHttpRequest（）；
xhr.onload=函数（）{
div.innerHTML=this.response；
};
open（'GET'，'x.html'，true）；
xhr.send（）；
}，假）；
}，假）；

更新：将Fetch API与.then（）一起使用

函数加载（url、元素）
{
获取（url）。然后（res=>{
element.innerHTML=res；
});
}

旧XMLHttpRequest

函数加载（url、元素）
{
req=新的XMLHttpRequest（）；
请求打开（“GET”、url、false）；
请求发送（空）；
element.innerHTML=req.responseText；
}

用法

load（“x.html”，document.getElementById（“b”）；

这将加载“x.html”并将其放入元素中

我发现jquery从加载的文件中加载运行脚本，而将innerHTML设置为某物并不能起作用。。。不要测试是否可以在之后调用init（）函数…

可能使用

？检查body的onload事件“我需要在没有JS的情况下执行此操作”我想你的意思是没有jQuery？打开jQuery的文件并读取其方法“我需要在没有JS的情况下执行此操作”我想你的意思是没有jQueryben336 1分钟前“Yes Sorry html的object标记，用于添加插件，如果我想要此函数的异步版本，该怎么办？@eeadev，默认情况下它是异步的，因此您只需从

req.open（）

中删除

false

，或将其更改为

true

。请注意，jquery load将在加载的页面上执行js（就像你把一个页面加载到一个框架中一样），而仅仅设置html是不行的。你可以扩展你的答案吗？或者写一个简短的代码片段来说明你想说什么？

<object type="text/html" data="my.html">

<!DOCTYPE html>
<html>
<head>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('a').addEventListener('click', function (e) {
                e.preventDefault();

                var div = document.createElement('div');
                div.id = 'b';
                document.body.appendChild(div);

                var xhr = new XMLHttpRequest();

                xhr.onload = function () {
                    div.innerHTML = this.response;
                };

                xhr.open('GET', 'x.html', true);
                xhr.send();
            }, false);
        }, false);
    </script>
</head>
<body>
    <a id="a" href="#">load</a>
</body>
</html>

var xmlhttp;
if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
} else {
    xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}

/* If you wanted post too */    
// xmlhttp.open("POST", "/posturl", true);
// xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// xmlhttp.send("email=" + "value" + "&message=" + "value" + "&name=" + name"value");

xmlhttp.open("GET", "file_to_get.xml", true/* async, setting to false will block other scripts */);
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        window.alert(xmlhttp.responseText);
    }
}