循環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"},
 ....
}

希望對您有所幫助。