JS Sıralı İşlem Yapmak | Cevap #5664

Merhabalar,
Bir sayfada verilerin olduğu bir tablo var ve her satırın son hücresi boş bir alan. Ben JS veya JQuery ile bu satırları tek tek okuyup hücrelerin içindeki verileri alabiliyorum. Sorum şuki;

Tablo altındaki butona basınca tetiklenecek ve her okuduğum satırdaki verileri ajax ile php tarafına gönderip DB kaydı yaptırmak, kayıt tamamlanıp durum bilgisi geri döndükten sonra sonraki kaydı php tarafına göndermek ve her post işleminin sonucunda ilgili satırın son sütünuna işlem durumu ile bilgi yazdırmak istiyorum.

JS Async & await ile yapmaya çalıştım ama olmadı bir türlü, yada bu saatte kafam durdu. Özellikle @tayfunerbilen bu konu ile ilgili ders çekerse süper olur :) şimdiden yardımlarınız için teşekkürler.

en basit haliyle

<table border="1" width="100%">
    <thead>
    <tr>
        <th>ID</th>
        <th>Başlık</th>
        <th>Durum</th>
    </tr>
    </thead>
    <tbody>
    <tr data-id="1">
        <td>1</td>
        <td>Başlık 1</td>
        <td class="status"></td>
    </tr>
    <tr data-id="2">
        <td>2</td>
        <td>Başlık 2</td>
        <td class="status"></td>
    </tr>
    <tr data-id="3">
        <td>3</td>
        <td>Başlık 3</td>
        <td class="status"></td>
    </tr>
    </tbody>
</table>

<button id="get-request-btn">Sorgula</button>

<style>
    tr.error td {
        background: orangered;
        color: #fff;
    }
    tr.success td {
        background: green;
        color: #fff;
    }
</style>

ve javascript tarafın

let total = $('table tbody tr').length,
    current = 0

$('#get-request-btn').on('click', () => {
    if (current + 1 < total) {
        getRequest(current);
    }
});

function getRequest(current) {
    const tr = $('table tbody tr:eq(' + current + ')');
    const id = tr.data('id');
    $.post('ajax.php', {id}, function(response) {
        tr.find('td:last').text(response.status);
        if (response.statusCode == 1) {
            tr.addClass('error');
        } else {
            tr.addClass('success');
        }
        if (current < total) {
            getRequest(current);
        }
    }, 'json');
    current += 1;
}

php tarafın

<?php

sleep(1);

$id = $_POST['id'];

$status = ['Başarılı', 'Hata!'];
$statusCode = rand(0,1);

echo json_encode([
    'id' => $id,
    'status' => $status[$statusCode],
    'statusCode' => $statusCode
]);

bunları kendine göre uyarlamak sana kalmış :)