CRUD com Python - #6 Delete e Ajax

Nessa videoaula trabalharemos com o delete utilizando o ajax para fornecer um maior dinamismo a nossa aplicação.

Apagar dados no Python com Ajax

project/urls.py

Vamos criar a url que será responsável por eliminar os dados no nosso banco:

from django.contrib import admin
from django.urls import path
from app.views import delete

urlpatterns = [
    path('delete/<int:pk>/', delete, name='delete'),
]

app/views.py

Já vamos criar a função view relativa ao delete:

def delete(request, pk):
    db = Carros.objects.get(pk=pk)
    db.delete()
    return redirect('home')

app/templates/index.html

Vamos chamar o link responsável por deletar os dados na index.html. No fim do index.html também vamos carregar os arquivos estáticos:

<a href="/delete/{{dbs.id}}/" class="btn btn-danger btnDel">Deletar</a>

{% load static %}
<script src="{% static 'javascript.js' %}"></script>

project/settings.py

Primeiramente vamos configurar o javascript no nosso projeto:

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

app/static/javascript.js

Vamos criar dentro da pasta app o diretório static responsável pelos arquivos estáticos do sistema tais como css e javascript:

(function(win,doc){
    'use strict';

    //Verifica se o usuário realmente quer deletar o dado
    if(doc.querySelector('.btnDel')){
        let btnDel = doc.querySelectorAll('.btnDel');
        for(let i=0; i < btnDel.length; i++){
            btnDel[i].addEventListener('click', function(event){
                if(confirm('Deseja mesmo apagar este dado?')){
                    return true;
                }else{
                    event.preventDefault();
                }
            });
        }
    }

    //Ajax do form
    if(doc.querySelector('#form')){
        let form=doc.querySelector('#form');
        function sendForm(event)
        {
            event.preventDefault();
            let data = new FormData(form);
            let ajax = new XMLHttpRequest();
            let token = doc.querySelectorAll('input')[0].value;
            ajax.open('POST', form.action);
            ajax.setRequestHeader('X-CSRF-TOKEN',token);
            ajax.onreadystatechange = function()
            {
                if(ajax.status === 200 && ajax.readyState === 4){
                    let result = doc.querySelector('#result');
                    result.innerHTML = 'Operação realizada com sucesso!';
                    result.classList.add('alert');
                    result.classList.add('alert-success');
                }
            }
            ajax.send(data);
            form.reset();
        }
        form.addEventListener('submit',sendForm,false);
    }
})(window,document);

app/templates/form.html

Vamos incrementar a div result e o link para o Javascript:

<div class="col-8 m-auto pt-4 pb-2 text-center">
    <div id="result"></div>

    <form name="form" id="form" action="{% if db %}/update/{{db.id}}/{%else%}/create/{% endif %}" method="post">
        {% csrf_token %}
        <!--{{form.as_p}}-->
        <div class="form-group mt-4">Modelo: {{form.modelo}}</div>
        <div class="form-group mt-4">Marca: {{form.marca}}</div>
        <div class="form-group mt-4">Ano: {{form.ano}}</div>
        <input type="submit" class="btn btn-success" value="Salvar">
    </form>
</div>

{% load static %}
<script src="{% static 'javascript.js' %}"></script>

Por hoje é só! Sucesso nos códigos e na vida!

Do you need a teacher? webdesignemfoco@gmail.com