文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么AJAX不适用于for-循环

问为什么AJAX不适用于for-循环
EN

Stack Overflow用户

提问于 2014-07-29 10:53:04

回答 1查看 138关注 0票数 0

我正在开发小型应用程序，它应该生成工作计划和计算时间：http://www.ankieta.gorna.pl/kalendarz.php。我编写了函数kalkulacja()，它应该通过ajax计算每一行的输入和输出结果。我不明白为什么它只处理最后一行，在以前的所有情况下都会抛出错误。我很感谢你的帮助。

<body onload="init();">
    <div class="container">
            <button type="button" id="tydz_minus" name="tydz_minus"><</button>
            <button type="button" id="tydz_plus" name="tydz_plus">></button>
        <table id="tabela">
            <thead>
                <tr>
                    <td></td>
                    <td class="tydz" id="pon"></td>
                    <td class="tydz" id="wt"></td>
                    <td class="tydz" id="sr"></td>
                    <td class="tydz" id="czw"></td>
                    <td class="tydz" id="pn"></td>
                    <td class="tydz" id="sob"></td>
                    <td class="tydz" id="ndz"></td>
                    <td>tydz.</td>
                    <td>miesiąc</td>
                </tr>
            </thead>
            <tbody id="tbody">
                <?php
                    $dane = $_POST["staff"];
                    $link = mysqli_connect("") or die("Error " . mysqli_error($link));

                    if($link) {
                        echo "";
                    } else {
                        echo "nie ok";
                    }
                    $result = mysqli_query($link,"SELECT staff FROM Staff");
                    while($row = mysqli_fetch_array($result)) {
                    $pracownik = $row['staff'];
                    print "<tr><td>" . $pracownik . "</td><td><input id='time' type='text'><input id='time' type='text'></td><td><input id='time' type='text'><input id='time' type='text'></td><td><input id='time' type='text'><input id='time' type='text'></td><td><input id='time' type='text'><input id='time' type='text'></td><td><input id='time' type='text'><input id='time' type='text'></td><td><input id='time' type='text'><input id='time' type='text'></td><td><input id='time' type='text'><input id='time' type='text'></td><td id='ww'></td><td></td></tr>";
                    }
                ?>
            </tbody>
        </table>        
            <input name="staff" id="staff" type="text"/>
            <input type="submit" value="Dodaj pracownika" onclick="save_staff();"/>
    </div>
        <script>
        $(document).ready(function() {
        $('#tbody tr td #time').datetimepicker({
        datepicker:false,
        format:'H:i'
        }); });
    </script>
</body>



function init() {
    var zlap_plus = document.getElementById("tydz_plus");
    var zlap_minus = document.getElementById("tydz_minus");
    zlap_plus.onclick = plus_tydz;
    zlap_minus.onclick = minus_tydz;
    dni();
    for(var e = 0 ; e < 19 ; e++) {
    kalkulacja(e); }
}
var dzis = new Date();
var day = 86400000;
var pon = Date.now() - ((dzis.getDay()*day)-day);                       //zwraca pierwszy dzień tygodnia
var pierwszy = Date.now() - ((dzis.getDate() - dzis.getDay())*day);     //zwraca pierwszy dzień miesiąca
//Funkcja tworzy nagłówek tabeli i generuje daty
function dni() {
                document.getElementById("pon").innerHTML = "<div id='cell'>" + new Date(pon).toLocaleDateString() + "</div>";
                document.getElementById("wt").innerHTML = new Date(pon + day).toLocaleDateString();
                document.getElementById("sr").innerHTML = new Date(pon + (2*day)).toLocaleDateString();
                document.getElementById("czw").innerHTML = new Date(pon + (3*day)).toLocaleDateString();
                document.getElementById("pn").innerHTML = new Date(pon + (4*day)).toLocaleDateString();
                document.getElementById("sob").innerHTML = new Date(pon + (5*day)).toLocaleDateString();
                document.getElementById("ndz").innerHTML = new Date(pon + (6*day)).toLocaleDateString();
}
//Funkcja przesuwa kalendarz o tydzień
function plus_tydz() {
                pon = pon+7*day;
                return dni();

            }
//Funkcja cofa kalendarz o tydzień
function minus_tydz() {
                pon = pon-7*day;
                return dni();

            }
//Funkcja tworzy nowy obiekt ajax
var ajax = createXmlHttpRequestObject();
function createXmlHttpRequestObject() {
            var ajax;

            if(window.ActiveXObject) {
                try {
                    ajax = new ActiveXObject("Microsoft.XMLHTTP");
                } catch(e) {
                    ajax = false;
                }
            }
            else {
                try {
                    ajax = new XMLHttpRequest();
                } catch(e) {
                    ajax = false;
                }
            }
            if (!ajax) 
                alert("Nie uadło się utworzyc obiektu");
            else 
            return ajax;
    } 
//Funkcja zapisuje w bazie danych nowego pracownika via ajax
function save_staff() {
    if(ajax) {
        var staff = document.getElementById("staff").value;
        var dane = "staff=" + staff;
        ajax.open("POST", "kalendarz_dane.php", true);
        ajax.onreadystatechange = handle;
        ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        ajax.send(dane);
    }

}
//Funkcja obsługuje odpowiedź serwera z funkcji save_staff
function handle() {
        if(ajax.readyState == 4) {
            if(ajax.status == 200) {
                try {
                    document.getElementById("tbody").innerHTML = ajax.responseText;
                }catch(e) {
                    alert(e.toString());
                }
            } else {
                alert(ajax.statusText);
            }
        }
    }
function kalkulacja(e) {
    var cal = 0;
    var len = document.getElementById("tbody").rows.length;
    for(var i = 1 ; i < 8 ; i++) {
        var x = document.getElementById("tbody").rows[e].cells[i].children[0].value;
        var y = document.getElementById("tbody").rows[e].cells[i].children[1].value;
        var timeStart = new Date("01/09/1970 " + x).getTime();
        var timeEnd = new Date("01/09/1970 " + y).getTime();
        var workday = (timeEnd - timeStart) / 3600000;
        cal += workday; }
    if(ajax) {
        var mk = "cal=" + cal;
        ajax.open("GET", "kalendarz_time.php?cal=" + cal, true);
        ajax.onreadystatechange = handletime;
        ajax.send(null);
    } else {
        setTimeout(kalkulacja(e), 2000)
    }
    function handletime() {
        if(ajax.readyState == 4) {
            if(ajax.status == 200) {
                try {
                    var s = 8 + (e*10)
                    document.getElementById("tbody").getElementsByTagName("td").item(s).innerHTML = ajax.responseText;
                    setTimeout(kalkulacja(e), 2000);
                }catch(e) {
                    alert(e.toString());
                }
            } else {
                alert(ajax.statusText);
            }
        }
    }

}

php

ajax

for-loop

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-07-29 11:07:16

这一行：

setTimeout(kalkulacja(e), 2000)

应：

setTimeout(function() {
    kalkulacja(e);
}, 2000);

按照编写它的方式，它是在设置超时时调用kalkulacja，而不是在计时器过期时调用。

但是，主要的问题是，每次调用ajax时都使用相同的kalkulacja对象。如果进行多个并发AJAX调用，则需要为每个调用使用不同的XMLHttpRequest对象。所以kalkulakja应该从以下几个方面开始：

var ajax = createXmlHttpRequestObject();

所以每次你都有一个新的。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25013599

复制

相似问题

问为什么AJAX不适用于for-循环
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么AJAX不适用于for-循环EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么AJAX不适用于for-循环
EN