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参数然后正确绑定到当前值回调：

$.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个结果。这里的问题是你的变种。它以i = 0开始，以i = 1结束。所以只有div $（＆＃34;＃＆＃34; + 0）.html（数据）和$（＆＃34;＃＆＃34; + 1）.html（数据）。

用

来解决这个问题

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

Answer 4

我猜你需要在页面加载时只发送一个请求。在你的php文件中是ajax url，你需要逐个执行这两个查询，然后在同一个文件中的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"},
 ....
}

我希望它有所帮助。

循环ajax调用以填充多个div

5 个答案: