Post method in django using ajax

Question

I have a form that I am trying to implement with Ajax, after inputing some content on the textbox, when I click on the sumbit button using my mouse, everything works fine (page didnt refresh, data posted on database, and new data displayed on the page). But when I try to submit data by pressing enter, the page is displaying only the serialized data from my form (nothing more, html file do not work)and it says in the console:

Resource interpreted as Document but transferred with MIME type application/json: "http://localhost:8000/try/".

current page looks exactly like this after pressing enter button(nothing more):

{"task": {"id": 52, "todo": "wws", "author": 1, "completed": false}}

these are the data that came from my form.

this is my views.py

class TodoList(View):
    def get(self, request):
        todo_list = ToDo.objects.filter(author_id=request.user.id)
        form = AddTodo()
        context = {
            'todo_list': todo_list,
            'form': form,
        }
        return render(request, 'trylangto/try.html', context)

    def post(self, request):
        form = AddTodo(request.POST)
        if form.is_valid():
            form.instance.author_id = request.user.id
            new_form = form.save()
            return JsonResponse({'task': model_to_dict(new_form)}, status=200)
        else:
            return redirect('trylang:todo-list')
        return redirect('trylang:todo-list')

this is my main.js:

$(document).ready(function(){

    $("#createbutton").click(function(){
        var formdata = $("#addtodoform").serialize();

        $.ajax({
            url: $("#addtodoform").data('url'),
            data: formdata,
            type: 'post',
            success: function(response){
                $("#tasklist").append('<div class="card mb-1" ><div class="card-body">'+ response.task.todo +'<button type="button" class="close"><span aria-hidden="true">&times;</span></button></div></div>')
            }
        });
    });
});

and here is my template:

{% extends 'base.html' %}
{% load crispy_forms_tags %}


{% block content %}
    {% if user.is_authenticated %}
        <div class="media content-section">
            <form class="media-body pt-3" method="POST" id="addtodoform" data-url="{% url 'trylang:todo-list' %}">
                {% csrf_token %}
                <legend><h5>add new tasks</h5></legend>
                <fieldset class="form-group ">
                    {{ form|crispy}}
                </fieldset>
                <button class="btn btn-outline-info float-right" type="button" id="createbutton">add</button>
            </form>
        </div>
    {% endif %}

    <div id="tasklist">
        {% for task in todo_list %}
        <div class="card mb-1" >
            <div class="card-body">
                {{task.todo}}
                <button type="button" class="close">
                  <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
        {% endfor %}
    </div>
{% endblock %}

UPDATE: I am including my models.py just in case

class ToDo(models.Model):
    todo = models.CharField(max_length=500)
    date_posted = models.DateTimeField(default=timezone.now, editable=False)
    author = models.ForeignKey(User, on_delete=models.CASCADE, related_name='users')
    completed = models.BooleanField(default=False)

this is what I get on the console when I use console.log(formdata):

csrfmiddlewaretoken=N91OUGSd6kBFkB1E2DMZuMW6qJD7cc3frPprwGMLTuupcg6PKYtt44jA4z5Lx6xX&todo=this%20is%20the%20content%20of%20my%20textbox

Answer 1

You don't need model_to_dict. So, try:

if form.is_valid():
            form.instance.author_id = request.user.id
            new_form = form.save()
            return JsonResponse({'task': new_form}, status=200)
        else:
            return redirect('trylang:todo-list')
        return redirect('trylang:todo-list')

EDIT

You are submitting the form not through ajax. When you click button it was submitting the form. So, e.preventDefault() should do the job.

$(document).ready(function(){

    $("#createbutton").click(function(e){
        e.preventDefault();  <--- You were missing this
        var formdata = $("#addtodoform").serialize();

        $.ajax({
            url: $("#addtodoform").data('url'),
            data: formdata,
            type: 'post',
            success: function(response){
                $("#tasklist").append('<div class="card mb-1" ><div class="card-body">'+ response.task.todo +'<button type="button" class="close"><span aria-hidden="true">&times;</span></button></div></div>')
            }
        });
    });
});