AJAX удалить запрос POST в Django Python - PullRequest
Новая
       121

AJAX удалить запрос POST в Django Python

0 голосов
/ 09 мая 2020

Я создаю простое веб-приложение TO-DO Django, следуя руководству csdojo здесь . Я хотел добавить Ajax как в addTodo, так и в deletedTodo. Хотя addTodo работает правильно, но deleteTodo всегда отображает меня на JSON страницу с любым возвратом. Это мое первое Django веб-приложение, пожалуйста, помогите мне найти ошибку, ОГРОМНОЕ СПАСИБО !!

urls.py 

from django.contrib import admin
from django.urls import path
from hello.views import view 
from todo.views import todo_view, addTodo, deleteTodo

urlpatterns = [
    path('admin/', admin.site.urls),
    path('sayHello/', view),    
    path('todo/', todo_view, name = "todo_view"),   
    path('addTodo/', addTodo, name = "addTodo"),
    path('deleteTodo/<int:todo_id>/', deleteTodo, name='deleteTodo'),   
]

views.py 

    def addTodo(request) :
    if request.is_ajax and request.method == "POST":
        new_item = TodoItem(content = request.POST['content'])
        new_item.save()
        ser_instance = serializers.serialize('json', [ new_item, ])
        return JsonResponse({"new_item": ser_instance}, status=200)
    else :
         return JsonResponse({"error": new_item.errors}, status=400)

def deleteTodo(request, todo_id) :
    if request.is_ajax and request.method == "POST":
        item = TodoItem.objects.get(id=todo_id)
        item.delete()
        return JsonResponse({'url': reverse('todo_view')},status=200)
    else :
        return JsonResponse({"error": item.errors}, status=400)

todo. html

    {% extends "base.html" %}
    <title>{% block title %} Vixtrum to do list {% endblock title %}</title>
    {% block content %}
    <h1>To do list</h1>

    <ul id="list">
        {% for todo_item in all_items %}
        <li id="todo-{{todo_item.id}}">{{ todo_item.content }}
            <form class="deleteTD" action="/deleteTodo/{{todo_item.id}}/" method="post" style="display: inline; margin: 10px;">{% csrf_token %}
                <input type="submit" value="Delete" class="btn btn-outline-danger" onclick="deleteTodo({{todo_item.id}})"/>
            </form>
        </li>
        {% endfor %}
    </ul>

    <!-- Add form input  -->
    <form id="addTD" action="/addTodo/" method="post">{% csrf_token %}
        <input type="text" name="content" />
        <input type="submit" value="Add" class="btn btn-outline-primary" />
    </form>

    {% endblock content %}


{% block javascript %}
<script>
// add todo item submit
$("#addTD").submit(function (e) {
    // preventing from page reload and default actions
    e.preventDefault();
    // serialize the data for sending the form data.
    var serializedData = $(this).serialize();
    // make POST ajax call
    $.ajax({
        type: 'POST',
        url: "{% url 'addTodo' %}",
        data: serializedData,
        success: function (response) {
            // on successfull creating object
            // 1. clear the form.
            $("#addTD").trigger('reset');

            var new_todo = JSON.parse(response["new_item"]);
            var fields = new_todo[0]["fields"];
            var id = new_todo[0]["pk"]
            $("#list").prepend(
                `<li id="todo-${id}">${fields["content"]}
                    <form id="deleteTD" action="/deleteTodo/${id}/" method="post" style="display: inline; margin: 10px;">{% csrf_token %}
                        <input type="submit" value="Delete" class="btn btn-outline-danger"/>
                    </form>
                </li>`
            )

        },
        error: function (response) {
            // alert the error if any error occured
            alert(response["responseJSON"]["error"]);
        }
    })
})
function deleteTodo(id) {
    let confirmation = confirm("are you sure you want to remove the item?");
    let todo_id = id;
    let url = `/deleteTodo/${todo_id}/`;
    $.ajax({
       url:"{% url 'todo_view' %}",
       data: {
           'csrfmiddlewaretoken': "{{ csrf_token }}"
       },
       type: "POST",
       dataType: "json",
         }).done(
            function(){
            alert("Deleted");
            $("#list #todo-" + todo_id).remove();
           }).fail(
              function(){alert("Error");}
            ) 
       }

</script>
{% endblock javascript %}

Текущий макет

После нажатия кнопки удаления, это то место, куда он перенаправляет меня JSON

...