Question

我有这个脚本，我不确定该怎么做。我基本上是想在页面上添加ajax请求响应而不刷新，也就是说x.php有一个iframe youtube视频，我希望能够观看其中一个iframe视频

当我按下按钮来附加来自x.php的更多ajax请求时。该脚本会附加但中断其他已经附加的ajax请求div。

我的代码

test.php

<script>

document.addEventListener('DOMContentLoaded', function(){

document.querySelector('#executeAjax').addEventListener('click', sendAjax);

function sendAjax(){
var xhr= new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
document.querySelector('#ajax').innerHTML += xhr.responseText;

}
}
xhr.open('POST','x.php');
xhr.send();
}

});

</script>

<button id='executeAjax'>Execute</button>
<div id='ajax'></div>

x.php

<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>

Answer 1

应该可以解决问题

<script>
document.addEventListener('DOMContentLoaded', function(){
    document.querySelector('#executeAjax').addEventListener('click', function(event){
        event.preventDefault();
        var xhr= new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                document.querySelector('#ajax').insertAdjacentHTML( 'beforeend', xhr.responseText);
            }
        }
        xhr.open('POST','x.php');
        xhr.send();
    });
});
</script>

附加的ajax请求会中断其他已经附加的ajax请求（普通js）

1 个答案: