多個form一次保存？

Question

我將數據用while撈出後，每筆數據都會有一個 form，例如form123
然後每一筆數據旁邊我都有個按鈕可以儲存該筆數據
但因為太多筆數據了，導致假設有五十筆數據，就要按五十次保存按鈕

$(".ing").click(function(e){
    var id = e.currentTarget.dataset.id;
$.ajax({
                type:'POST',
                url:'ing',
                data:$("#form"+id).serialize(),
                cache:false,
                success: function(){
                    
                }
            });
});

想問如何做一個一次保存每一筆數據的按鈕與ajax？

---

感謝各位，簡直太牛啦

Answer 1

這裏有一個方法，但是風險比較高

// 對每一個 form 調用 ajax，並獲得 $.ajax 返回的 promise 對象
var promises = $("form").toArray()
    .map(function(form) {
        return $.ajax({
            type: "POST",
            url: "ing",
            data: $(form).serialize(),
            cache: false,
            success: function() {
            }
        });
    });

// 使用 jQuery.when() 來處理所有結果
// 注意：只有全部都成功調用才會有 done
$.when.apply($, promises).done(function() {
    var results = Array.prototype.slice.apply(arguments);
    // 這裏你可以處理每一個 form 的結果，其結果是有序的，
    // 順序為 $("form") 產生的數組的順序
});

如果想低風險實現的話，那就要自己寫點東西來處理每一個 ajax 的返回。

補充

下面我寫了一個 doAll() 來處理多個 Promise 的返回值，它也返回一個 promise(jQuery的)，但只有 resolve 沒有 reject，所以最後只需要註冊 done 回調就好

function doAll(promises) {
    var d = $.Deferred();
    var results = Array(promises.length);
    promises.forEach(function (p, i) {
        p.done(function (data) { return results[i] = { success: true, data: data }; })
            .fail(function (data) { return results[i] = { success: false, data: data }; });
    });
    $.when.apply($, promises).always(function () {
        d.resolve(results);
    });
    return d.promise();
}

下面是一個試驗，隨機生成若幹數據(實驗中設置 n = 10)，產生n個隨機數，模擬異步調用。隨機數是 timeout 時間，第偶個數的調用模擬成功，第奇數次調用模擬失敗

function mock(v, t) {
    console.log(`v = ${v}, t = ${t}`);
    const d = $.Deferred();
    setTimeout(() => {
        if (v % 2 === 0) {
            d.resolve(t);
        } else {
            d.reject(t);
        }
    }, t);
    return d.promise();
}

var n = 10;

const numbers = Array.from(Array(n), () => Math.floor(Math.random() * 900) + 100);
console.log(numbers);

doAll(numbers.map((n, i) => mock(i, n)))
    .done(results => console.log(results));

結果如下圖：

Answer 2

1. 使用$('form')获取所有的form；

2. 使用循环提交多个form。

代码参考下面：

var forms = $('form');

for (var i = 0; i < forms.length; i++) {
    var form = $(forms[i]);
    $.ajax({
        type:'POST',
        url:'ing',
        data: form.serialize(),
        cache: false,
        success: function(){
        
        }
    });
}

Answer 3

获取所有要保存的表单，然后遍历循环保存。以下是伪代码

<script>
    //saveAll是按键的id
    $("#saveAll").on("click", function() {
        //如果不想所有的，这里可以给要一起保存的form表单添加同一个class
        $("form").each(function(index, domEle) {
            //如果url不一样可以在html的form表单添加一个属性，然后这里去获取
            $.ajax({
                type:'POST',
                url:'ing',
                data:$(domEle).serialize(),
                cache:false,
                success: function(){
                    
                }
            });
        });
    })
</script>