jquery - 在 Ajax 内部使 Ajax 循环
问题描述
我想做的是:
首先 Ajax 正在上传 csv 文件并获取所有产品列表。然后在成功时,它会通过循环并调用另一个上传这些产品的 ajax。
问题:
当它通过循环时,它会冻结浏览器并等待每个产品都被上传,然后它会打印出 ID。
我需要的:
摆脱冻结浏览器以及在上传每个产品后何时可以打印每个 ID。
代码:
var data = new FormData();
data.append('file', jQuery('#item_data')[0].files[0]);
data.append('action', 'csv_upload');
jQuery.ajax({
url: ajaxurl,
data: data,
timeout: 3000,
cache: false,
contentType: false,
processData: false,
type: 'POST',
dataType: 'json',
success: function (data) {
jQuery( ".wrap .all" ).html(data.information.length);
jQuery.each(data.information, function (i, elem) {
add_item(elem, i);
});
jQuery( "#results" ).append( "<p style='color:green;'>The end!</p>" );
}
});
function add_item(elem, i){
var data = new FormData();
data.append('action', 'product_upload');
data.append('file_cont', JSON.stringify(elem));
jQuery.ajax({
async: false,
url: ajaxurl,
data: data,
type: 'POST',
processData: false,
contentType: false,
dataType: 'json',
success: function (response) {
jQuery( "#results" ).append( "<span>"+ data.message +"</span>" );
}
});
jQuery( ".wrap .count" ).html(i+1);
}
解决方案
var data = new FormData();
data.append('file', jQuery('#item_data')[0].files[0]);
data.append('action', 'csv_upload');
jQuery.ajax({
url: ajaxurl,
data: data,
timeout: 3000,
cache: false,
contentType: false,
processData: false,
type: 'POST',
dataType: 'json',
success: function(data) {
jQuery(".wrap .all").html(data.information.length);
add_item(data.information, data.information[0], 0);
}
});
function add_item(info, elem, i ) {
var
data = new FormData();
data.append('action', 'product_upload');
data.append('file_cont', JSON.stringify(elem));
jQuery.ajax({
url: ajaxurl,
data: data,
type: 'POST',
processData: false,
contentType: false,
dataType: 'json',
success: function(response) {
if (info.length >= i + 1) {
jQuery("#results").append("<span>" + data.message + "</span>");
add_item(info, info[i + 1], i + 1);
jQuery(".wrap .count").html(i + 1);
}
}
});
if(info.length == i){
jQuery( "#results" ).append( "<p style='color:green;'>The End!</p>" );
}
}
您可以递归地执行此操作,因为设置async: false
将在执行下一条指令之前等待请求完成。
更新:删除async: false
,并添加了“结束”消息更正。
推荐阅读
- javascript - Javascript Fetch 没有服务器消息
- angular - 需要帮助才能使用 Orange Money 的 API
- javascript - React native 无需权限即可访问相机或照片库
- c# - C# xamarin 表单中文件夹中的文件名?[安卓]
- python - 导入 ModuleNotFoundError:运行 sagemaker 管道步骤时没有名为 X 的模块
- angular - 如何使用 Angular 6 进行多个独立订阅?
- python-3.x - Python修改GCP存储的元数据
- typescript - 字符串类型不存在属性 | 对象打字稿
- sql - SQL:QUERY、IF 语句
- php - 如何在 Laravel 中重新生成 Auth 会话