循环ajax调用以填充多个div

Question

I've got two divs on my page

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

That I'm trying to dynamically fill with the following php call.

<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>

It looks like it's looping through the queries properly, however it 'erases' the first one and when I view the page, only the results of the second query remain. What am I doing wrong?

Answer 1

Notwithstanding the warnings about exposing a raw SQL interface in your API, the problem you have is that i in the callback once the AJAX call completes doesn't have the same value it did when you initiated the call.

The easiest solution is to use $.each or Array#forEach instead of a for loop, and use the index parameter that is then correctly bound to the current value in the callback:

$.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

This will work

 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

It looks that you have only 2 results. The problem here is your var i. it starts with i=0 and ends in i=1. So only div $("#" + 0).html(data) and $("#" + 1).html(data).

To fix this start with

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

Answer 4

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

Answer 5

I would set the datatype to application/json , so the answer can be a json object, not only text/html. I would return the following parameters from the php as a json via json_encode , something like this:

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

I hope it helps.