Javascript/jQuery中的并行Ajax调用
我对Javascript/jquery完全陌生，需要一些帮助。现在，我正在编写一个html页面，其中我必须进行5个不同的Ajax调用，以获取用于绘制图形的数据。现在，我这样调用这5个ajax调用：Javascript/jQuery中的并行Ajax调用,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我对Javascript/jquery完全陌生，需要一些帮助。现在，我正在编写一个html页面，其中我必须进行5个不同的Ajax调用，以获取用于绘制图形的数据。现在，我这样调用这5个ajax调用： $(document).ready(function() { area0Obj = $.parseJSON($.ajax({ url : url0, async : false, dataType : 'json' }).response
$(document).ready(function() {
area0Obj = $.parseJSON($.ajax({
url : url0,
async : false,
dataType : 'json'
}).responseText);
area1Obj = $.parseJSON($.ajax({
url : url1,
async : false,
dataType : 'json'
}).responseText);
.
.
.
area4Obj = $.parseJSON($.ajax({
url : url4,
async : false,
dataType : 'json'
}).responseText);
// some code for generating graphs
)} // closing the document ready function
public function url0() {
$answer = array(
array('smth' => 1, 'ope' => 'one'),
array('smth' => 8, 'ope' => 'two'),
array('smth' => 5, 'ope' => 'three')
);
die(json_encode($answer));
}
public function url1() {
$answer = array('one','two','three');
die(json_encode($answer));
}
public function url2() {
$answer = 'one ,two, three';
die(json_encode($answer));
}
提前感谢。在jQuery.ajax中，您应该提供如下回调方法：
j.ajax({
url : url0,
async : true,
dataType : 'json',
success:function(data){
console.log(data);
}
}
jQuery.getJSON(url0, function(data){
console.log(data);
});
您不能使用
异步：false执行该操作-正如您所知，代码是同步执行的（即，在前一个操作完成之前，操作不会启动）。
您需要设置async:true
（或者忽略它-默认情况下为true）。然后为每个AJAX调用定义一个回调函数。在每个回调中，将接收到的数据添加到数组中。然后，检查是否已加载所有数据（arrayOfJsonObjects.length==5
）。如果有，调用函数对数据执行任何操作。您将无法像示例那样处理它。设置为async将使用另一个线程发出请求，并允许应用程序继续
在这种情况下，您应该使用一个新函数来绘制一个区域，然后使用ajax请求的回调函数将数据传递给该函数
例如：
$(document).ready(function() {
function plotArea(data, status, jqXHR) {
// access the graph object and apply the data.
var area_data = $.parseJSON(data);
}
$.ajax({
url : url0,
async : false,
dataType : 'json',
success: poltArea
});
$.ajax({
url : url1,
async : false,
dataType : 'json',
success: poltArea
});
$.ajax({
url : url4,
async : false,
dataType : 'json',
success: poltArea
});
// some code for generating graphs
}); // closing the document ready function
看起来您需要异步调度请求，并定义一个回调函数来获取响应
按照您所做的方式，它将等待变量成功赋值（意思是：响应刚刚到达），直到继续发送下一个请求。就用这样的东西
$.ajax({
url: url,
dataType: 'json',
data: data,
success: function(data) {
area0Obj = data;
}
});
这应该可以解决问题。让我们试着这样做：
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var area0Obj = {responseText:''};
var area1Obj = {responseText:''};
var area2Obj = {responseText:''};
var url0 = 'http://someurl/url0/';
var url1 = 'http://someurl/url1/';
var url2 = 'http://someurl/url2/';
var getData = function(someURL, place) {
$.ajax({
type : 'POST',
dataType : 'json',
url : someURL,
success : function(data) {
place.responseText = data;
console.log(place);
}
});
}
getData(url0, area0Obj);
getData(url1, area1Obj);
getData(url2, area2Obj);
});
</script>
如您所见，这里创建了一个函数getData（），用于从服务器获取数据，然后调用了3次。结果将以异步方式接收，例如，第一个可以获得第三个呼叫的应答，最后一个可以获得第一个呼叫的应答
控制台的答案是：
[{"smth":1,"ope":"one"},{"smth":8,"ope":"two"},{"smth":5,"ope":"three"}]
["one","two","three"]
"one ,two, three"
请阅读：在这里您可以清楚地看到有关异步的信息。默认的异步参数值为true
默认情况下，所有请求都是异步发送的（即，默认情况下设置为true）。如果需要同步请求，请将此选项设置为false。跨域请求和数据类型：“jsonp”请求不支持同步操作。请注意，同步请求可能会暂时锁定浏览器，在请求处于活动状态时禁用任何操作…您可以将不同ajax函数的所有功能组合到一个ajax函数中，或者从一个ajax函数调用其他函数（在本例中，它们是专用的/控制器端），然后返回结果。Ajax调用确实有点停顿，因此最小化它们是一种方法
您还可以将ajax函数设置为异步（这将与普通函数的行为类似），然后在所有函数返回其数据后，您可以在最后呈现图形。以下是解决问题的方法：使用（延迟）：
回调函数仅在所有3个ajax调用完成时调用。以下操作对我有效-我有多个ajax调用，需要传递序列化对象：
var args1 = {
"table": "users",
"order": " ORDER BY id DESC ",
"local_domain":""
}
var args2 = {
"table": "parts",
"order": " ORDER BY date DESC ",
"local_domain":""
}
$.when(
$.ajax({
url: args1.local_domain + '/my/restful',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
type: "POST",
dataType : "json",
contentType: "application/json; charset=utf-8",
data : JSON.stringify(args1),
error: function(err1) {
alert('(Call 1)An error just happened...' + JSON.stringify(err1));
}
}),
$.ajax({
url: args2.local_domain + '/my/restful',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
type: "POST",
dataType : "json",
contentType: "application/json; charset=utf-8",
data : JSON.stringify(args2),
error: function(err2) {
calert('(Call 2)An error just happened...' + JSON.stringify(err2));
}
})
).then(function( data1, data2 ) {
data1 = cleanDataString(data1);
data2 = cleanDataString(data2);
data1.forEach(function(e){
console.log("ids" + e.id)
});
data2.forEach(function(e){
console.log("dates" + e.date)
});
})
function cleanDataString(data){
data = decodeURIComponent(data);
// next if statement was only used because I got additional object on the back of my JSON object
// parsed it out while serialised and then added back closing 2 brackets
if(data !== undefined && data.toString().includes('}],success,')){
temp = data.toString().split('}],success,');
data = temp[0] + '}]';
}
data = JSON.parse(data);
return data; // return parsed object
}
谁让您得到这样的响应？这里值得注意的是，每个响应（resp1、resp2、resp3）都将具有以下结构：[data、statusText、jqXHR]。因此，您需要调用resp1[0]以从第一个响应中获取实际数据。
var args1 = {
"table": "users",
"order": " ORDER BY id DESC ",
"local_domain":""
}
var args2 = {
"table": "parts",
"order": " ORDER BY date DESC ",
"local_domain":""
}
$.when(
$.ajax({
url: args1.local_domain + '/my/restful',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
type: "POST",
dataType : "json",
contentType: "application/json; charset=utf-8",
data : JSON.stringify(args1),
error: function(err1) {
alert('(Call 1)An error just happened...' + JSON.stringify(err1));
}
}),
$.ajax({
url: args2.local_domain + '/my/restful',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
type: "POST",
dataType : "json",
contentType: "application/json; charset=utf-8",
data : JSON.stringify(args2),
error: function(err2) {
calert('(Call 2)An error just happened...' + JSON.stringify(err2));
}
})
).then(function( data1, data2 ) {
data1 = cleanDataString(data1);
data2 = cleanDataString(data2);
data1.forEach(function(e){
console.log("ids" + e.id)
});
data2.forEach(function(e){
console.log("dates" + e.date)
});
})
function cleanDataString(data){
data = decodeURIComponent(data);
// next if statement was only used because I got additional object on the back of my JSON object
// parsed it out while serialised and then added back closing 2 brackets
if(data !== undefined && data.toString().includes('}],success,')){
temp = data.toString().split('}],success,');
data = temp[0] + '}]';
}
data = JSON.parse(data);
return data; // return parsed object
}