Quiero ejecutar ajax en cada bucle de la casilla de verificación seleccionada. Sin embargo, 'jquery each' ignora el proceso ajax. Completado o no completado, el ciclo continuará. Perdón por mi lenguaje, espero que sea comprensible.
Aquí hay un ejemplo del código que hice.
$('input[name="options[]"]:checked').each(function() { jQuery.ajax({ url: "www.example.com", type: "POST", data: { name:name }, success: function(data) { // do something } }); });Intenté usar async: false en la opción ajax, pero la página se congela y volverá a la normalidad una vez que se complete el proceso.
Entonces, todo lo que tiene que hacer con cualquier tipo de lotes de Promesa es reunirlos todos en una matriz y pasar a la función "Promesas por lotes". No importa si es jQuery, Angular u otro
// Gather all promises returned from $.ajax var allPromises = []; $('input[name="options[]"]:checked').each(function () { allPromises.push( callAjax($(this).val() ); }); $.when(allPromises).then(function () {/* do something after all*/}) function callAjax(name) { // Returns promise from $.ajax return jQuery.ajax({ url: "www.example.com", type: "POST", data: {name: name}, success: function (data) {/* do something after this call*/} }); }Aquí hay una solución alternativa usando fetch() , ya que está disponible en todos los navegadores modernos (no se necesita jQuery):
const jsrv='https://jsonplaceholder.typicode.com/', arr='users,posts,comments'.split(','); Promise.all(arr.map(e=>fetch(jsrv+e).then(r=>r.json()))) .then(console.log) .as-console-wrapper {max-height:100% !important} En este script de muestra, recopilo las respuestas de tres llamadas Ajax al recurso disponible públicamente proporcionado por typicode.com: la matriz resultante consta de tres matrices que contienen los usuarios, las publicaciones y los comentarios. En mi demostración, simplemente proporciono console.log como la función de procesamiento. Por supuesto, esto será diferente en una situación de la vida real.
fetch también se puede usar con POST , consulte aquí para obtener más detalles: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch .