Django – #48 – REST API cz. 23 – Zastosowanie techniki AJAX do API DRF w aplikacji Django – Delete

Posted on Author Dominik Bednarski 0

Wprowadzenie.

Do tej pory poznaliśmy jak przy pomocy techniki AJAX odczytać listę rekordów z bazy danych, jak odczytać pojedynczy rekord, jak utworzyć nowy rekord w bazie danych oraz jak zaktualizować dane w konkretnym rekordzie w bazie danych. W tym wpisie przedstawiłem kolejną funkcjonalność, jaką jest usunięcie danego rekordu z bazy danych.

Zakres artykułu.

  • Zastosowanie techniki AJAX do API DRF w aplikacji Django – Delete

Zastosowanie techniki AJAX do API DRF w aplikacji Django – Delete

Załóżmy, że chcemy zrealizować funkcjonalność usunięcia wypożyczenia z bazie danych. W tym celu będziemy potrzebowali pola wejściowego input, w którym będziemy umieszczali id wypożyczenia oraz przycisku przy pomocy, którego uruchomiony zostanie mechanizm usuwania rekordu.

W pierwszej kolejności napiszmy funkcję widoku. Funkcja wygląda bardzo podobnie do funkcji, gdzie wydobywaliśmy konkretny rekord z bazy danych, z tym że tu zmienną w postaci id wypożyczenia musimy umieścić w adresie URL metody odpowiedzialnej za usuwanie rekordów oraz musimy skorzystać z metody request.delete().

def ajaxBorrowDelete(request):
    context = {}

    headers = {
        'Authorization': 'Token 98bda9a3429cba4278ed53c2914f493a1c27cc4f',
    }
    
    if request.POST:
        context['info_post'] = requests.delete(f'http://127.0.0.1:8000/api/borrows/{request.POST.get("borrowId")}/', headers=headers).status_code

    return JsonResponse(context)

Następnie w pliku urls.py wykorzystajmy funkcję path(), w której zmapujemy adres URL na napisaną wyżej funkcję.

path('ajax/borrow/delete/', views.ajaxBorrowDelete, name='ajaxBorrowDelete'),

Przejdźmy teraz do szablonu, który stworzyliśmy w poprzednim wpisie i dodajmy do niego kod html i javascript. W kodzie html stwórzmy input, przycisk i div jako kontener dla naszych danych.

<hr>

<h4>DELETE BORROW</h4>
<br>
<div class="mb-3 mt-3">
    <label for="input_borrow_id_3" class="form-label">Borrow id:</label>
    <input type="text" class="form-control" id="input_borrow_id_3" placeholder="borrow id" name="input_borrow_id_3">
</div>
<button id="button_ajax_delete_borrow" type="button" class="btn btn-primary">Delete borrow</button>
<br><br>
<div id="text_box_7">Text 7</div>

Następnie przejdźmy do kodu javasrcipt. W kodzie tym nie ma dodatkowych rzeczy, które już nie zostały omówione w poprzednich wpisach o AJAX do API DRF. Dlatego poniżej zamieszczam cały kod js bez dodatkowego opisu.

$('#button_ajax_delete_borrow').click(function() {
    clearTimeout(delayTimer);
    $('#text_box_7').text('Loading...');
    delayTimer = setTimeout(function() {
        var borrow_id = $('#input_borrow_id_3').val();
        var my_text = '';
        $.ajax({
            url: '/ajax/borrow/delete/',
            data: {
                'borrowId' : borrow_id,
                csrfmiddlewaretoken: '{{ csrf_token }}',
            },
            dataType: 'json',
            success: function(data) {
                my_text += data['info_post'];       
                $('#text_box_7').html(my_text);
            },
            method: 'POST',
        });
    }, 1000);
});

Po stworzeniu całej funkcjonalności przejdźmy do przeprowadzenia prostych testów. W przeglądarce wpiszmy adres 127.0.0.1:8000/ajax/borrows/.

Sprawdźmy, jakie są dostępne nasze wypożyczenia, korzystając z poprzednio napisanych funkcjonalności.

Wprowadźmy id wypożyczenia, które chcemy usunąć i naciśnijmy na przycisk Delete borrow.

Po prawidłowym wykonaniu żądania powinniśmy w miejsce tekstu diva zobaczyć kod statusu 204.

Dla pewności sprawdźmy jeszcze, korzystając z poprzednio napisanej funkcjonalności, całą listę wypożyczeń i przeszukajmy, czy na pewno wypożyczenie to zostało usunięte.

Autor artykułu
Dominik Bednarski

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.