Question

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

<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一起使用。

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

1 个答案: