Question

请记住，我是非常 JavaScript语法的新手，所以请耐心等待。

我试图使用多个onreadystatechange作为承诺来捕捉我从快递中返回的内容，但每次我这样做时，都会被调用。这是我的代码：

var ready = function(){

    xhr.open('GET', 'getallbeertypes');
    xhr.send(null);
    xhr.onreadystatechange = function () {

        var parent = document.getElementById('recipes');
        var docfrag = document.createDocumentFragment();

        if(xhr.status == 200){
            var beerTypes = JSON.parse(xhr.responseText);

            //loop through beerTypes to append a button to each list item
            for (var beer = 0; beer < beerTypes.length; beer++){
                //create necessary elements
                var li = document.createElement('li');
                var button = document.createElement('BUTTON');

                //set text content to list item
                li.textContent = beerTypes[beer].alias;

                //append list item to button
                button.appendChild(li);

                // add onclick attribute
                button.setAttribute("name", beerTypes[beer]._id);
                button.setAttribute("onclick", "moreInfo(this.getAttribute('name'))");

                //append button to document fragment
                docfrag.appendChild(button);
            }

            //display on DOM element
            parent.appendChild(docfrag);
        }else{
            // console.log(JSON.parse(xhr.responseText));
            var header = document.createElement('h1');
            header.textContent = "Something went wrong. Please try again later.";
            docfrag.appendChild(header);
            parent.appendChild(header);
        }
    }
}
ready();

因此上面的代码部分工作，它将每个JSON对象显示为项目列表中的按钮。单击该按钮时，应运行以下功能：

var moreInfo = function(_id){
    xhr.open('GET', '/getuserrecipes/' + _id);
    xhr.send();
    xhr.onreadystatechange = function(){
        console.log("is this running?");
        console.log(JSON.parse(xhr.responseText));
    }
}

我希望onclick属性应该只运行moreInfo函数。

每当我单击其中一个按钮时，else函数中的ready语句就会以某种方式运行，并在屏幕上显示Something went wrong. Please try again later。

我唯一能做的就是onreadystatechange，但我真的不知道是不是。

如何/为什么其他功能甚至被调用，我该如何阻止它？感谢所有帮助。

Answer 1

您应该检查请求的状态。为此，请使用readyState属性。有5个状态，从0到4的整数，你想要最后一个，即4。

类似的东西：

if (xhr.readyState == 4 && xhr.status == 200){
 ...
}

检查this示例。

Javascript：我是否正确使用onreadystatechange？

1 个答案: