<undefined:1 GET http://localhost:63342/Twitchtv/undefined 404 (未找到)> [英] <undefined:1 GET http://localhost:63342/Twitchtv/undefined 404 (Not Found)>

问题描述

 $(document).ready(function () {加载流信息()；显示全部();});var allStreamInfo = [{"user" : "ogaminglol"},{"user" : "faceittv"},{"user" :"twitch"},{"user" :"hearthstonesea"},{"user" :"stephensonlance"},{"user":"aegabriel"}];函数 loadStreamInfo() {for(var i = 0; i <6; i++) {(功能(j){$.ajax({url:("https://wind-bow.gomix.me/twitch-api/streams/" + allStreamInfo[j].user),jsonp: "回调",数据类型:jsonp"，成功:功能(数据){if(data.stream == null){allStreamInfo[j]["状态"] = "离线";} 别的 {allStreamInfo[j]["status"] = "online";}}});})(一世)}for(var i = 0; i <6; i++) {(功能(j){$.ajax({url:("https://wind-bow.gomix.me/twitch-api/channels/" + allStreamInfo[j].user),jsonp : "回调",数据类型:jsonp"，成功:功能(数据){allStreamInfo[j]["logo"] = data.logo;allStreamInfo[j]["gameName"] = data.game;allStreamInfo[j]["views"] = data.views;allStreamInfo[j]["followers"] = data.followers;allStreamInfo[j]["url"] = data.url;}});})(一世)}}函数显示所有(){for(var i = 0; i <6; i++){(功能(j){var outString = "";outString += "
";outString += "<img src='" + allStreamInfo[j].logo + "' alt='logo'>";outString += ""+ allStreamInfo[j].gameName +"</span></a>";outString += "<span id='state'>"+ allStreamInfo[j].status+"</span>";outString += " 视图:"+ allStreamInfo[j].views + "</span></span>";outString += "<span id='follow-block'>追随者:<span id='followed'>"+ allStreamInfo[j].followers +"</span></span>";outString += "</div>";$("#result").append(outString);})(一世)}}

body {填充:40px;;}.切换按钮{宽度:400px；白颜色;高度:100px；文本对齐:居中；边距:0 自动；}.全部 {背景色:#6699CC；宽度:30%；高度:70px；行高:70px；右边框:2px 纯灰色；显示:内联；向左飘浮;光标:指针；}.在线的 {光标:指针；行高:70px；背景颜色:学员蓝；右边框:2px 纯灰色；宽度:30%；高度:70px；显示:内联；向左飘浮;}.离线 {光标:指针；背景颜色:深橙色；行高:70px；宽度:30%；高度:70px；显示:内联；向左飘浮;}#结果 {边距顶部:30px；}.物品 {宽度:500px；高度:70px；边距:5px 自动；背景色:#666699；左边框:4px 纯红色；颜色:白烟；/*边框:2px纯红色；*/}一种 {文字装饰:无；}图像{宽度:50px；高度:50px；边距顶部:10px；左边距:20px；右边距:21px；}span#gameName,span#views-block,span#state,span#follow-block {位置:相对；底部:18px；}跨度#gameName，跨度#state，跨度#views-block{右边距:21px；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="toggle-button"><div class="all" onclick="displayAll()">All</div><div class="online" onclick="displayOnline()">在线</div><div class="offline" onclick="displayOffline()">离线</div>

<div id="结果">

昨天之后我解决了hoisting 问题.这是帖子.今天早上我在控制台中收到此 404 not found 错误消息.它就像之前的页面一样.仍然有很多undefine in page.在调试窗口中，我发现每个$.ajax 请求都运行良好.我不知道为什么.

解决方案

这是因为您的 displayAll() 函数在 $.ajax 承诺返回之前执行了.而allStreamInfo[j]["logo"] = data.logo;在success callback函数中这样的代码必须是undefined.请阅读 如何从异步调用返回响应?.你会知道$.ajax 的基本原理.这是我的代码:

 $(document).ready(function () {加载流信息()；});var allStreamInfo = [{"user" : "ogaminglol"},{"user" : "faceittv"},{"user" :"twitch"},{"user" :"hearthstonesea"},{"user" :"zondalol"},{"user":"aegabriel"}];函数 loadStreamInfo() {for(var i = 0; i <6; i++) {(功能(j){$.ajax({url:("https://wind-bow.gomix.me/twitch-api/streams/" + allStreamInfo[j].user),异步:假，jsonp: "回调",数据类型:jsonp"，成功:功能(数据){if(data.stream == null){allStreamInfo[j]["状态"] = "离线";} 别的 {allStreamInfo[j]["status"] = "online";}$.ajax({url:("https://wind-bow.gomix.me/twitch-api/channels/" + allStreamInfo[j].user),异步:假，jsonp : "回调",数据类型:jsonp"，成功:功能(数据){allStreamInfo[j]["logo"] = data.logo;allStreamInfo[j]["gameName"] = data.game;allStreamInfo[j]["views"] = data.views;allStreamInfo[j]["followers"] = data.followers;allStreamInfo[j]["url"] = data.url;显示全部(j);}});}});})(一世)}}功能 displayAll(i) {var outString = "";outString += "
";outString += "<img src='" + allStreamInfo[i].logo + "' alt='logo'>";outString += ""+ allStreamInfo[i].gameName +"</span></a>";outString += ""+ allStreamInfo[i].status+"</span>";outString += " 视图:"+ allStreamInfo[i].views + "</span></span>";outString += "<span id='follow-block'>追随者:<span id='followed'>"+ allStreamInfo[i].followers +"</span></span>";outString += "</div>";$("#result").append(outString);}

body {填充:40px；}.切换按钮{宽度:400px；白颜色;高度:100px；文本对齐:居中；边距:0 自动；}.全部 {背景色:#6699CC；宽度:30%；高度:70px；行高:70px；右边框:2px 纯灰色；显示:内联；向左飘浮;光标:指针；}.在线的 {光标:指针；行高:70px；背景颜色:学员蓝；右边框:2px 纯灰色；宽度:30%；高度:70px；显示:内联；向左飘浮;}.离线 {光标:指针；背景颜色:深橙色；行高:70px；宽度:30%；高度:70px；显示:内联；向左飘浮;}#结果 {边距顶部:30px；}.物品 {宽度:500px；高度:70px；边距:5px 自动；背景色:#666699；左边框:4px 纯红色；颜色:白烟；/*边框:2px纯红色；*/}一种 {文字装饰:无；}图像{宽度:50px；高度:50px；边距顶部:10px；左边距:20px；右边距:21px；}span#gameName,span#views-block,span#state,span#follow-block {位置:相对；底部:18px；}跨度#gameName，跨度#state，跨度#views-block{右边距:21px；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="toggle-button"><div class="all" onclick="displayAll()">All</div><div class="online" onclick="displayOnline()">在线</div><div class="offline" onclick="displayOffline()">离线</div>

<div id="结果">

您必须将display() 函数放在成功回调 中.唯一的缺点是您无法控制首先执行哪个 (function(j){...})(i) .那是因为异步.

        $(document).ready(function () {
            loadStreamInfo();
            displayAll();
        });
        var allStreamInfo = [{"user" : "ogaminglol"},{"user" : "faceittv"},{"user" :"twitch"},{"user" :"hearthstonesea"},{"user" :"stephensonlance"},{"user" :"aegabriel"}];
        function loadStreamInfo() {
            for(var i = 0; i < 6; i++) {
                (function (j) {
                    $.ajax({
                        url:("https://wind-bow.gomix.me/twitch-api/streams/" + allStreamInfo[j].user),
                        jsonp: "callback",
                        dataType: "jsonp",
                        success: function (data) {
                            if(data.stream == null){
                                allStreamInfo[j]["status"] = "offline";
                            } else {
                                allStreamInfo[j]["status"] = "online";
                            }
                        }
                    });
                })(i)


            }

            for(var i = 0; i < 6; i++) {
                (function (j) {
                    $.ajax({
                        url:("https://wind-bow.gomix.me/twitch-api/channels/" + allStreamInfo[j].user),
                        jsonp : "callback",
                        dataType : "jsonp",
                        success: function (data) {
                            allStreamInfo[j]["logo"] = data.logo;
                            allStreamInfo[j]["gameName"] = data.game;
                            allStreamInfo[j]["views"] = data.views;
                            allStreamInfo[j]["followers"] = data.followers;
                            allStreamInfo[j]["url"] = data.url;
                        }
                    });
                })(i)

            }

        }
        function displayAll() {
            for(var i = 0; i < 6; i++){
            (function (j) {
                var outString = "";
                outString += "<div class='item'>";
                outString += "<img src='" + allStreamInfo[j].logo + "' alt='logo'>";
                outString += "<a href='" +allStreamInfo[j].url + "'><span id='gameName'>" + allStreamInfo[j].gameName +"</span></a>";
                outString += "<span id='state'>"+ allStreamInfo[j].status+"</span>";
                outString += "<span id='views-block'>Views:<span id='view'>" + allStreamInfo[j].views + "</span></span>";
                outString += "<span id='follow-block'>Followers:<span id='followed'>" + allStreamInfo[j].followers +"</span></span>";
                outString += "</div>";
                $("#result").append(outString);
            })(i)
            }
        }

body {
    padding: 40px;;
}

.toggle-button {
    width: 400px;
    color: white;
    height: 100px;
    text-align: center;
    margin: 0 auto;
}

.all {
    background-color: #6699CC;
    width: 30%;
    height: 70px;
    line-height: 70px;
    border-right: 2px solid grey;
    display: inline;
    float: left;
    cursor: pointer;
}

.online {
    cursor: pointer;
    line-height: 70px;
    background-color: cadetblue;
    border-right: 2px solid grey;
    width: 30%;
    height: 70px;
    display: inline;
    float: left;
}
.offline {
    cursor: pointer;
    background-color: darkorange;
    line-height: 70px;
    width: 30%;
    height: 70px;
    display: inline;
    float: left;
}

#result {
    margin-top: 30px;
}
.item {
    width: 500px;
    height: 70px;
    margin: 5px auto;
    background-color: #666699;
    border-left: 4px solid red;
    color: whitesmoke;
    /*border: 2px solid red;*/
}
a {
    text-decoration: none;
}
img {
    width: 50px;
    height: 50px;
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 21px;
}

span#gameName,span#views-block,span#state ,span#follow-block {
    position: relative;
    bottom: 18px;
}

span#gameName,span#state,span#views-block{
    margin-right: 21px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-button">
        <div class="all" onclick="displayAll()">All</div>
        <div class="online" onclick="displayOnline()">Online</div>
        <div class="offline" onclick="displayOffline()">Offline</div>
    </div>

    <div id="result">

    </div>

After yesterday I solve the hoisting problem. Here is the post.This morning I get this 404 not found error message in console. And it's just like the page before. Still got many undefine in page.In debug window, I found every $.ajax request works well. I don't know why.

解决方案

This is because your displayAll() function was executed before $.ajax promises returned. And allStreamInfo[j]["logo"] = data.logo; code like this in the success callback function must be undefined. Do read How do I return the response from an asynchronous call?. And you will know $.ajax's basic priciple. Here is my code:

    $(document).ready(function () {
        loadStreamInfo();
    });
    var allStreamInfo = [{"user" : "ogaminglol"},{"user" : "faceittv"},{"user" :"twitch"},{"user" :"hearthstonesea"},{"user" :"zondalol"},{"user" :"aegabriel"}];
    function loadStreamInfo() {
        for(var i = 0; i < 6; i++) {
            (function (j) {
                $.ajax({
                    url:("https://wind-bow.gomix.me/twitch-api/streams/" + allStreamInfo[j].user),
                    async: false,
                    jsonp: "callback",
                    dataType: "jsonp",
                    success: function (data) {
                        if(data.stream == null){
                            allStreamInfo[j]["status"] = "offline";
                        } else {
                            allStreamInfo[j]["status"] = "online";
                        }

                        $.ajax({
                            url:("https://wind-bow.gomix.me/twitch-api/channels/" + allStreamInfo[j].user),
                            async: false,
                            jsonp : "callback",
                            dataType : "jsonp",
                            success: function (data) {
                                allStreamInfo[j]["logo"] = data.logo;
                                allStreamInfo[j]["gameName"] = data.game;
                                allStreamInfo[j]["views"] = data.views;
                                allStreamInfo[j]["followers"] = data.followers;
                                allStreamInfo[j]["url"] = data.url;
                                displayAll(j);
                            }
                        });
                    }
                });
            })(i)


        }
    }

    function displayAll(i) {

            var outString = "";
            outString += "<div class='item'>";
            outString += "<img src='" + allStreamInfo[i].logo + "' alt='logo'>";
            outString += "<a href='" +allStreamInfo[i].url + "'><span id='gameName'>" + allStreamInfo[i].gameName +"</span></a>";
            outString += "<span id='state'>" + allStreamInfo[i].status+"</span>";
            outString += "<span id='views-block'>Views:<span id='view'>" + allStreamInfo[i].views + "</span></span>";
            outString += "<span id='follow-block'>Followers:<span id='followed'>" + allStreamInfo[i].followers +"</span></span>";
            outString += "</div>";
            $("#result").append(outString);

    }

body {
    padding: 40px;
}

.toggle-button {
    width: 400px;
    color: white;
    height: 100px;
    text-align: center;
    margin: 0 auto;
}

.all {
    background-color: #6699CC;
    width: 30%;
    height: 70px;
    line-height: 70px;
    border-right: 2px solid grey;
    display: inline;
    float: left;
    cursor: pointer;
}

.online {
    cursor: pointer;
    line-height: 70px;
    background-color: cadetblue;
    border-right: 2px solid grey;
    width: 30%;
    height: 70px;
    display: inline;
    float: left;
}
.offline {
    cursor: pointer;
    background-color: darkorange;
    line-height: 70px;
    width: 30%;
    height: 70px;
    display: inline;
    float: left;
}

#result {
    margin-top: 30px;
}
.item {
    width: 500px;
    height: 70px;
    margin: 5px auto;
    background-color: #666699;
    border-left: 4px solid red;
    color: whitesmoke;
    /*border: 2px solid red;*/
}
a {
    text-decoration: none;
}
img {
    width: 50px;
    height: 50px;
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 21px;
}

span#gameName,span#views-block,span#state ,span#follow-block {
    position: relative;
    bottom: 18px;
}

span#gameName,span#state,span#views-block{
    margin-right: 21px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-button">
    <div class="all" onclick="displayAll()">All</div>
    <div class="online" onclick="displayOnline()">Online</div>
    <div class="offline" onclick="displayOffline()">Offline</div>
</div>

<div id="result">

</div>

You must put the display() function in success callback. The only downside is you can't control which (function(j){...})(i) is executed first. That's because asynchronous.

这篇关于<undefined:1 GET http://localhost:63342/Twitchtv/undefined 404 (未找到)>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！