Question

我有一个问题：我有这个有效的代码：

<script type="text/javascript">
    $(document).ready(function(){
    $("input").click(function(){
        for (var i=1; i<8; i++)
        {
        var a = "id="+i;
        var b = "#sp"+i;
        ajax(a, b);
        }           
    });     

    function ajax(a, b)
    {
        $.ajax({
        url:"ajax.php",
        type:"get",
        data:a,
        success:function(respond){
            $(b).html(respond);
        }
        });
    };      
    });
</script>


<body>
Numbers: <span id="sp1"></span>|<span id="sp2"></span>|<span id="sp3"></span>|<span id="sp4"></span>|<span id="sp5"></span>|<span id="sp6"></span>|<span id="sp7"></span>
<input type="button" value="Send"/>
</body>

和php：

if (isset($_GET["id"]))
{
    echo $_GET['id']+10;
}

以上代码正常运作。我不明白为什么下面的代码不起作用：

$(document).ready(function(){
    $("input").click(function(){
        for (var i=1; i<8; i++)
        {
        var a = "id="+i;
        var b = "#sp"+i;
        $.ajax({
            url:"ajax.php",
            type:"get",
            data:a,
            success:function(respond){
            $(b).html(respond);
            }
        });
        }           
    });               
});

Jquery代码ajax作为函数运行良好，但没有它不起作用......这对我来说很奇怪。请告诉我为什么。感谢

Answer 1

这是因为你的a和b变量属于包含循环的函数的范围，而$.ajax函数是异步的，所以循环将完成在第一个AJAX响应回来之前，b将等于#sp7。

我相信如果您将代码更改为此代码，它将起作用：

$(document).ready(function(){
    $("input").click(function(){ 
        for (var i=1; i<8; i++)
        {
            (function(i) {
                $.ajax({
                    url:"ajax.php",
                    type:"get",
                    data: "id="+i,
                    success:function(respond){
                        $("#sp"+i).html(respond);
                    }
                });
            })(i);
        }           
    });               
});

旁注：如果你在一系列项目上循环，而不是像你在这里做的那样从1到7循环，并且有类似的情况，你可以使用jQuery的$.each()函数而不需要在循环中使用自调用函数，例如：

$.each(someArray, function(i) {
    $.ajax({
        url:"ajax.php",
        type:"get",
        data: "id="+i,
        success:function(respond) {
            $("#sp"+i).html(respond);
        }
    });
});

jquery ajax结果如果没有功能就不能工作

1 个答案: