将数据响应从 xhr 传递到 html 元素

Question

我的页面中有输入元素，当我单击按钮时，我从 XMLHttpRequest 接收数据。 我尝试将一些数据传递给 html 元素，数据正确接收但我无法传递给元素。 这是我的代码

<input type="text" value="5" id="a" />

<script>
(function() {
            let origOpen = XMLHttpRequest.prototype.open;
            let a = 0;

            XMLHttpRequest.prototype.open = function() {
                console.log('request started!');
                this.addEventListener('load', function() {
                    console.log('request completed!');
                    console.log(this.readyState); //will always be 4 (ajax is completed successfully)
                    console.log((JSON.parse(this.responseText)).input.a); // result = 20
                    a = parseInt((JSON.parse(this.responseText)).input.a);

                    $("#a").val(a); // not work
                    $("#a").setAttribute('value',a); // error: TypeError: $(...).setAttribute is not a function
                    document.getElementById("a").value = a; // error: TypeError: document.getElementById(...) is null
                    $("#a").value = a; // not work

                });
                origOpen.apply(this, arguments);
            };
        })();
</script>

Answer 1

问题出在您的请求中。如果你真的想使用 XHR 的遗留物，它应该以这种方式重构：

const input = document.getElementById('a');

const myReq = new XMLHttpRequest();

myReq.onload = function() {
    const data = JSON.parse(this.responseText);
    input.value = data;
};

myReq.onerror = function(err) {
    console.log(err);
};

myReq.open('get', '[your url]', true);
myReq.setRequestHeader('Accept', ' application/json');
myReq.send();

我已经测试了这段代码，它适用于一个愚蠢的 api。