JS Sıralı İşlem Yapmak

kargasa1982 1283 gün önce

916 defa görüntülendi

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.

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (3)

tayfunerbilen

1282 gün önce

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ış :)

#005664

tolunayemre

1282 gün önce

Yazdığın kodu paylaşabilirsen daha sağlıklı olur. Async ve await ile olmamasının sebepleri; ya yanlış kullanıldı yada yanlış yerde bir callback/propmise sorgusu oluşturuldu.

#005660

dadasbaba

1282 gün önce

birazdaha açık anlatırmısın ?

#005651