Django – #45 – REST API cz. 20 – Zastosowanie techniki AJAX do API DRF w aplikacji Django – Retrieve

Posted on Author Dominik Bednarski 0

Wprowadzenie.

W poprzednim wpisie o AJAX do API DRF poznaliśmy w jaki sposób uzyskać listę rekordów z bazy danych. W tym wpisie natomiast przedstawiłem, w jaki sposób przy pomocy techniki AJAX odczytać konkretny rekord znajdujący się w bazie danych. 

Zakres artykułu.

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

Zastosowanie techniki AJAX do API DRF w aplikacji Django – Retrieve

Załóżmy, że chcemy na naszej stronie stworzyć funkcjonalność, gdzie będziemy podawać id wypożyczenia, a następnie przy pomocy przycisku będziemy uzyskiwać informacje o tym wypożyczeniu, które kolejno będą wyświetlane na stronie.

W pierwszej kolejności napiszmy funkcję widoku, która będzie wydobywała dane konkretnego rekordu z bazy danych. Funkcja ta jest bardzo podobna do funkcji z poprzedniego wpisu, gdzie uzyskiwaliśmy listę wypożyczeń. W funkcji tej dodatkowo będziemy musieli dodać nową zmienną borrow_id, do której będziemy przypisywać id wypożyczenia. Id będziemy wysyłać w formularzu, który będzie obsługiwany techniką AJAX, przy pomocy żądania GET. Następnie modyfikację należy wykonać w adresie URL, który jest odpowiedzialny za przekierowanie do funkcji zwracającej wynik konkretnego wypożyczenia z tabeli wypożyczeń.

def ajaxBorrowRetrieve(request):
context = {}
borrow_id = ''
headers = {
'Authorization': 'Token 98bda9a3429cba4278ed53c2914f493a1c27cc4f',
}
if request.GET:
borrow_id = request.GET['borrowId']
context['borrow'] = requests.get(f'http://127.0.0.1:8000/api/borrows/{borrow_id}/edit/', headers=headers).json()
return JsonResponse(context)
def ajaxBorrowRetrieve(request): context = {} borrow_id = '' headers = { 'Authorization': 'Token 98bda9a3429cba4278ed53c2914f493a1c27cc4f', } if request.GET: borrow_id = request.GET['borrowId'] context['borrow'] = requests.get(f'http://127.0.0.1:8000/api/borrows/{borrow_id}/edit/', headers=headers).json() return JsonResponse(context)
def ajaxBorrowRetrieve(request):
    context = {}
    borrow_id = ''

    headers = {
        'Authorization': 'Token 98bda9a3429cba4278ed53c2914f493a1c27cc4f',
    }

    if request.GET:
        borrow_id = request.GET['borrowId']
        context['borrow'] = requests.get(f'http://127.0.0.1:8000/api/borrows/{borrow_id}/edit/', headers=headers).json()

    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/retrieve/', views.ajaxBorrowRetrieve, name='ajaxBorrowRetrieve'),
path('ajax/borrow/retrieve/', views.ajaxBorrowRetrieve, name='ajaxBorrowRetrieve'),
path('ajax/borrow/retrieve/', views.ajaxBorrowRetrieve, name='ajaxBorrowRetrieve'),

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.

<h4>GET BORROW</h4>
<br>
<div class="mb-3 mt-3">
<label for="input_borrow_id" class="form-label">Borrow id:</label>
<input type="text" class="form-control" id="input_borrow_id" placeholder="borrow id" name="input_borrow_id">
</div>
<button id="button_ajax_get_borrow" type="button" class="btn btn-primary">Get borrow</button>
<br><br>
<div id="text_box_4">Text 4</div>
<h4>GET BORROW</h4> <br> <div class="mb-3 mt-3"> <label for="input_borrow_id" class="form-label">Borrow id:</label> <input type="text" class="form-control" id="input_borrow_id" placeholder="borrow id" name="input_borrow_id"> </div> <button id="button_ajax_get_borrow" type="button" class="btn btn-primary">Get borrow</button> <br><br> <div id="text_box_4">Text 4</div>
<h4>GET BORROW</h4>
<br>
<div class="mb-3 mt-3">
    <label for="input_borrow_id" class="form-label">Borrow id:</label>
    <input type="text" class="form-control" id="input_borrow_id" placeholder="borrow id" name="input_borrow_id">
</div>
<button id="button_ajax_get_borrow" type="button" class="btn btn-primary">Get borrow</button>
<br><br>
<div id="text_box_4">Text 4</div>

Następnie przejdźmy do kodu javasrcipt. Niemalże cała funkcja będzie wyglądała analogicznie jak funkcja napisana w poprzednim wpisie, z tym że teraz w metodzie $.ajax() dla klucza data przypiszemy kolejny słownik, w którym umieścimy klucz borrowId i wartość z naszego inputu z kodu html.

$('#button_ajax_get_borrow').click(function() {
clearTimeout(delayTimer);
$('#text_box_4').text('Pobieranie danych...');
delayTimer = setTimeout(function() {
var my_text = '';
var borrow_id = $('#input_borrow_id').val();
$.ajax({
url: '/ajax/borrow/retrieve/',
data: {
'borrowId' : borrow_id,
},
dataType: 'json',
method: 'GET',
success: function(data) {
my_text += '<ul>';
for(key in data['borrow']){
my_text += '<li>' + key + ' : ' + data['borrow'][key] + '</li>';
}
my_text += '</ul>';
$('#text_box_4').html(my_text);
},
});
}, 500);
});
$('#button_ajax_get_borrow').click(function() { clearTimeout(delayTimer); $('#text_box_4').text('Pobieranie danych...'); delayTimer = setTimeout(function() { var my_text = ''; var borrow_id = $('#input_borrow_id').val(); $.ajax({ url: '/ajax/borrow/retrieve/', data: { 'borrowId' : borrow_id, }, dataType: 'json', method: 'GET', success: function(data) { my_text += '<ul>'; for(key in data['borrow']){ my_text += '<li>' + key + ' : ' + data['borrow'][key] + '</li>'; } my_text += '</ul>'; $('#text_box_4').html(my_text); }, }); }, 500); });
$('#button_ajax_get_borrow').click(function() {
    clearTimeout(delayTimer);
    $('#text_box_4').text('Pobieranie danych...');
    delayTimer = setTimeout(function() {
        var my_text = '';
        var borrow_id = $('#input_borrow_id').val();

        $.ajax({
            url: '/ajax/borrow/retrieve/',
            data: {
                'borrowId' : borrow_id,
            },
            dataType: 'json',
            method: 'GET',
            success: function(data) {
                
                my_text += '<ul>';
                for(key in data['borrow']){
                    my_text += '<li>' + key + ' : ' + data['borrow'][key] + '</li>';
                }
                my_text += '</ul>';

                $('#text_box_4').html(my_text);
            },
        });

    }, 500);
});

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/.

Przejdźmy do sekcji, w której widoczny jest nasz nowy kod html. Wprowadźmy do pola wejściowego jakieś id, a następnie naciśnijmy na przycisk. 

W zawartości tagu div powinniśmy zobaczyć dane z wypożyczenia o id, które wprowadziliśmy w polu input. Sprawdźmy jeszcze dla pewności wynik dla innego wypożyczenia o innym id.

Jeżeli dane się zaktualizowały, nasza funkcjonalność działa prawidłowo.

Autor artykułu
Dominik Bednarski

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.