未调用第二个成功函数中的 Ajax 函数

Question

我正在使用DataTables库，我需要在其中发出连续的AJAX请求。 问题是第二个Success函数中的AJAX函数未被调用。 这是整个代码

$(document).ready(()=>{
$.ajax({
url: 'http://localhost:3000/api/post/getUserData',
method: 'post',
dataType: 'json',
data: {
"email": window.email,
"token": window.token
},
success: function(data){ // <-----------------------FIRST SUCCESS FUNCTION
let table = $('#datatable').dataTable({
data: data,
"autoWidth": true,
columns: [
{'data': 'id'},
{'data': 'main'},
{'data': 'shrinked'},
{'data': 'clicks'},
{"data": "id",
"render": function ( data, type, row, meta ) {
return `<button data-id=${data} onclick="disableThis(event)" class="btn btn-warning">Disable</button>`
}
},
{"data": "id",
"render": function ( data, type, row, meta ) {
return `<button data-id=${data} onclick="deleteThis(event)" class="btn btn-danger">Delete</button>`
}
}
]
})
//------------------------------Function to add new Row inside Datatable when Form is submmitted
$(function () {
$('#form').bind('submit', function (event) {
event.preventDefault();
$.ajax({
url: 'http://localhost:3000/userShrink',
type: 'post',
datatype: 'json',
data: {
fullUrl: $('#Url').val(),
email: window.email,
token: window.token
},
success: function () { // <-----------------SECOND SUCCESS FUNCTION (THIS ONE IS NOT EXECUTING)
$.ajax({
url: 'http://localhost:3000/api/post/getUserData',
method: 'post',
dataType: 'json',
data: {
"email": window.email,
"token": window.token
},
success: function(data2){
console.log(data2)
}
})
}
});
});
});
}
})
})

现在我在浏览器中检查了我的网络应用程序的Network配置文件，

在页面加载时，此块正在执行，从而将数据提供给DataTables库，然后库呈现表。

$(document).ready(()=>{
$.ajax({
url: 'http://localhost:3000/api/post/getUserData',
method: 'post',
dataType: 'json',
data: {
"email": window.email,
"token": window.token
},
success: function(data){ // <-----------------------FIRST SUCCESS FUNCTION
let table = $('#datatable').dataTable({
data: data,
"autoWidth": true,
columns: [
{'data': 'id'},
{'data': 'main'},
{'data': 'shrinked'},
{'data': 'clicks'},
{"data": "id",
"render": function ( data, type, row, meta ) {
return `<button data-id=${data} onclick="disableThis(event)" class="btn btn-warning">Disable</button>`
}
},
{"data": "id",
"render": function ( data, type, row, meta ) {
return `<button data-id=${data} onclick="deleteThis(event)" class="btn btn-danger">Delete</button>`
}
}
]
})

之后，如果提交form，它会触发此事件，然后成功POST数据库中的数据。

//------------------------------Function to add new Row inside Datatable when Form is submmitted
$(function () {
$('#form').bind('submit', function (event) {
event.preventDefault();
$.ajax({
url: 'http://localhost:3000/userShrink',
type: 'post',
datatype: 'json',
data: {
fullUrl: $('#Url').val(),
email: window.email,
token: window.token
},

当第二个success函数被执行或更确切地说没有执行时，事情会出错，我需要第二个成功函数的原因是将新提交的数据加载到DataTables中。

success: function () { // <-----------------SECOND SUCCESS FUNCTION (THIS ONE IS NOT EXECUTING)
$.ajax({
url: 'http://localhost:3000/api/post/getUserData',
method: 'post',
dataType: 'json',
data: {
"email": window.email,
"token": window.token
},
success: function(data2){
console.log(data2)
}
})
}

这种行为的原因可能是什么？谢谢。

Answer 1

自己修复了它， 这是现在add row函数

$(function () {
$('#form').bind('submit', async function (event) {
// using this page stop being refreshing
event.preventDefault();
let data = {
'fullUrl': $('#Url').val(),
'email': window.email,
'token': window.token
}
let data2 = {
'email': window.email,
'token': window.token
}
$.post('http://localhost:3000/userShrink', data);
setTimeout(()=>{
$.post('http://localhost:3000/api/post/getUserData', data2).done(function (res){
$('#datatable').DataTable().row.add(res[res.length-1]).draw();
});
}, 1000)
})
});