Question

使用Ajax，我想在点击相应的标签时显示某个文件的响应文本;例如，当点击＆＃34;框1＆＃34;选项卡，它必须显示box1.html，＆＃34;框2和＃34;的响应文本。对于box2.html和＆＃34;框3＆＃34;对于box3.html - （框文件位于ajax文件夹内）。问题是，所有三个选项卡仅显示box3.html的响应文本。当我打开控制台寻找错误时，没有。

HTML

<section>
    <!-- TABS -->
    <div>
        <button>Box 1</button>
        <button>Box 2</button>
        <button>Box 3</button>
    </div>


    <!-- ResponseText container -->
    <div id="response-text"></div>
</section>

的JavaScript

function query(selector) {
    return Array.prototype.slice.call(document.querySelectorAll(selector));
}

query('button').forEach(function(btn) {
    btn.onclick = function() {
        var xhr = new XMLHttpRequest();
        var files = ['box1', 'box2', 'box3'];

        for(var f=0; f<files.length; f++) {
            var result = files[f];
            xhr.open('POST', 'ajax/'+result+'.html', true);
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    document.querySelector('#response-text').textContent = xhr.responseText;
                }
            }
            xhr.send();
        }
    }
});

我将元素推入数组的风格是不合适的？我非常感谢您建议的更正，改进和提示。

Answer 1

你可能用命令
覆盖了div document.querySelector（＆＃39; #response-text＆＃39;）textContent = xhr.responseText。; 切换到附加并查看它是否正常工作 document.querySelector（＆＃39; #response-text＆＃39;）append（xhr.responseText）;

Ajax仅显示数组的最后一个文件元素的响应文本

1 个答案: