循环ajax调用以填充多个div

Question

我的页面上有两个div

<div id="1"></div>
<div id="2"></div>

我正在尝试动态填充以下php调用。

<script>
    var queries = ["SELECT * from table1", "SELECT * from table2"]

    for (var i = 0; i < queries.length; i++) {
        $.ajax({
            url: "querySQL.php",
            type: "GET",
            cache: false,
            data: {query: queries[i]},
            success: function(data) {
                $("#" + i).html(data);
            }
        });
    }
</script>

看起来好像在正确地循环查询，但是它“擦除”了第一个查询，当我查看该页面时，仅保留了第二个查询的结果。 我究竟做错了什么？

Answer 1

尽管有关于在API中公开原始SQL接口的警告，但您遇到的问题是，一旦AJAX调用完成，回调中的i就不会具有与您发起调用时相同的值。

最简单的解决方案是使用$.each或Array#forEach代替for循环，并使用index参数，然后将index参数正确绑定到回调中的当前值：

$.each(queries, function(i, query) {
    $.ajax({
        url: "querySQL.php",
        type: "GET",
        cache: false,
        data: { query: query },
        success: function(data) {
            $("#" + (i + 1)).html(data);  // NB: i starts at 0, not 1
        }
    });
});

Answer 2

这会起作用

 var queries = ["SELECT * from table1", "SELECT * from table2"];

       function callAjax(i){
            $.ajax({
                url: "querySQL.php",
                type: "GET",
                cache: false,
                data: {query: queries[i]},
                success: function(data) {
                   console.log(i)
                    $("#" + (i+1).html(data);
                }
            });
    }
       for (var i = 0; i < queries.length; i++) {

         callAjax(i)  

        }

Answer 3

看来您只有2个结果。 这里的问题是您的var i。 它以i = 0开头，以i = 1结束。 因此，只有div $（“＃” + 0）.html（data）和$（“＃” + 1）.html（data）。

为了解决这个问题

i=1; i <= queries.length; i++

Answer 4

我猜您只需要在页面加载时发送一个请求。在您的ajax url的php文件中，您需要一次执行两个查询，然后将div中的数据填充到同一文件中。并只返回所有数据在ajax成功时，您只需将返回的数据填充到div中。

Answer 5

我将datatype设置为application/json ，因此答案可以是一个json对象，而不仅仅是text / html。 我会通过json_encode从php作为json返回以下参数：

{firstResult:{divToUse: "#1", dataToFill: "#1 content"}, 
 secondResult:{divToUse: "#2", dataToFill: "#2 content"},
 ....
}

希望对您有所帮助。