[英]loop ajax calls to fill multiple divs
I've got two divs on my page 我的页面上有两个div
<div id="1"></div>
<div id="2"></div>
That I'm trying to dynamically fill with the following php call. 我正在尝试动态填充以下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>
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?
我究竟做错了什么?
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. 尽管有关于在API中公开原始SQL接口的警告,但您遇到的问题是,一旦AJAX调用完成,回调中的
i
就不会具有与您发起调用时相同的值。
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
或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
}
});
});
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)
}
It looks that you have only 2 results. 看来您只有2个结果。 The problem here is your var i.
这里的问题是您的var i。 it starts with i=0 and ends in i=1.
它以i = 0开头,以i = 1结束。 So only div $("#" + 0).html(data) and $("#" + 1).html(data).
因此,只有div $(“#” + 0).html(data)和$(“#” + 1).html(data)。
To fix this start with 为了解决这个问题
i=1; i <= queries.length; i++
我猜您只需要在页面加载时发送一个请求。在您的ajax url的php文件中,您需要一次执行两个查询,然后将div中的数据填充到同一文件中。并只返回所有数据在ajax成功时,您只需将返回的数据填充到div中。
I would set the datatype
to application/json
, so the answer can be a json object, not only text/html. 我将
datatype
设置为application/json
,因此答案可以是一个json对象,而不仅仅是text / html。 I would return the following parameters from the php as a json via json_encode
, something like this: 我会通过
json_encode
从php作为json返回以下参数:
{firstResult:{divToUse: "#1", dataToFill: "#1 content"},
secondResult:{divToUse: "#2", dataToFill: "#2 content"},
....
}
I hope it helps. 希望对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.