Question

我在使用for循环和AJAX时遇到了一些问题。我需要从数据库中获取一些信息，因此我将递增变量传递给PHP以获取信息，然后将其发回。麻烦的是它会立即跳到最大值，因此无法存储任何信息。

我不想使用jQuery。它可能更强大，但我发现Javascript更容易理解。

这是JS代码：

for (var i = 0; i <= 3; i++) {
    var js_var = i;  
    document.getElementById("link").onclick = function () {            
        // ajax start
        var xhr;
        if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); // all browsers
        else xhr = new ActiveXObject("Microsoft.XMLHTTP");     // for IE

        var url = 'process.php?js_var=' + js_var;
        xhr.open('GET', url, false);
        xhr.onreadystatechange = function () {
            if (xhr.readyState===4 && xhr.status===200) {
                var div = document.getElementById('test1');
                div.innerHTML = xhr.responseText;
                if (js_var == 2) {
                    var rawr = document.getElementById('test2');
                    rawr.innerHTML = xhr.responseText;
                }
            }
        }
        xhr.send();
        // ajax stop
        return false;
    }
};

这是PHP代码：

<?php
if (isset($_GET['js_var'])) $count = $_GET['js_var'];
else $count = "<br />js_var is not set!";

$con = mysql_connect("xxx","xxxxx","xxxx");

mysql_select_db('computerparty_d', $con);

$get_hs = mysql_query("SELECT * FROM hearthstone");

$spiller_navn = utf8_encode(mysql_result($get_hs,$count,1));


echo "$spiller_navn";
?>

Answer 1

请注意，您正在进行同步AJAX调用，这是不受欢迎的（它会在请求期间挂起浏览器，这可能不会结束）。你可能在某些浏览器中遇到问题，因为你正在调用onreadystatechange，它不应该用于同步请求。

Answer 2

您实际在做的是在for循环中绑定onclick事件而不发送ajax请求，另一点是，它会立即覆盖您在之前创建的前一个onclick处理程序上一次迭代。

因此，如果要添加多个侦听器，首先应考虑使用嵌套函数和闭包来保证每个侦听器的i变量安全，然后使用addEventListener而不是设置onclick功能。考虑到这些要点，您可以改为：

for (var i = 0; i <= 3; i++) {

    var clickFunc = (function (js_var) {
        return function () {
            // ajax start
            var xhr;
            if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); // all browsers
            else xhr = new ActiveXObject("Microsoft.XMLHTTP"); // for IE

            var url = 'process.php?js_var=' + js_var;
            xhr.open('GET', url, false);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var div = document.getElementById('test1');
                    div.innerHTML = xhr.responseText;
                    if (js_var == 2) {
                        var rawr = document.getElementById('test2');
                        rawr.innerHTML = xhr.responseText;
                    }
                }
            }
            xhr.send();
            // ajax stop
            return false;
        };
    })(i);

    document.getElementById("link").addEventListener("click", clickFunc);
}

Answer 3

看起来您正在通过用户点击发出AJAX请求。

for (var i = 0; i <= 3; i++) {
    var js_var = i;  
    document.getElementById("link").onclick

当执行此JS时，它将覆盖“link”的“onclick”侦听器两次。第一次第一次分配，第二次分配，第三次再次覆盖。结果是，当单击“link”元素时，只存在最后一个侦听器，从而导致为最后一次配置发出单个AJAX请求。

HTTP请求很昂贵（时间），可能值得在一个请求中获取所有数据，然后使用客户端JS相应地筛选该数据。

jQuery不比JS强大强大，它是带有一堆包装函数的JS。我个人的观点是，一旦IE9不再相关，jQuery将只被知道jQuery而不是JS的人使用。

使用for循环和标准Javascript AJAX的问题

3 个答案: