Страница все еще обновляется при использовании ajax с django

Question

Я использую свою собственную форму.Что выглядит так:

{%extends 'base_template.html'%}


{%block title%}
<title> Simple Ajax Demo </title>
{%endblock%}


{%block javascript%}
    <script>
    $(document).ready(function(){



    $("#formi").submit(function(event){


        $.ajax({
             type:"POST",
             url:"{% url 'haha:ajax' %}",
             data: {
                username : $('#username').val(),
                password : $('#password').val(),
                csrfmiddlewaretoken: {% csrf_token %},
             },

             success: function(data){
             alert('asdas');
             },
        });
   });

   });

    </script>

{%endblock%}

{%block content%}
<div>
    <form method="post" id="formi">
        {%csrf_token%}
        Username:<input type="text" id="username"><br>
        Password:<input type="text" id="password"><br>
        <button type="submit">Click Me</button>
    </form>
</div>
{%endblock%}

У меня есть два поля ввода с именем пароль и имя пользователя, которые будут сохранены в таблице User.

View.py

def ajax(request):
     if request.method == 'POST':
          username = request.POST['username']
          password = request.POST['password']
          Users.objects.create(username=username, password=password)

     return render(request,'core/ajax.html')

Я тоже пытался использовать метод GET.Но все же страница обновляется.Также пытался запустить вызов Ajax при нажатии кнопки, но он говорит что-то вроде ошибки многократного значения.Также пробовал с

username = request.POST.get('username')
password = request.POST.get('password') 

Answer 1

Только что изменил код jquery, работает хорошо !!Вот код:

{%extends 'base_template.html'%}


{%block title%}
<title> Simple Ajax Demo </title>
{%endblock%}


{%block javascript%}
    <script>


    $(document).on('submit','#formi',function(event){

          event.preventDefault();

          $.ajax({

                    method:"POST",
                    url:"{%url 'haha:ajax'%}",
                    data: {
                        username : $('#username').val(),
                        password : $('#password').val(),
                        csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
                    },

                    success: function(data){
                        alert('asasd');
                    },
            });
    });


    </script>

{%endblock%}

{%block content%}
<div>
    <form id="formi" method="post">
        {%csrf_token%}
        Username:<input type="text" name="username" id="username"><br><br>
        Password:<input type="text" name="password" id="password"><br><br>
        <input type="submit" value="Click Me"><br>
    </form>
</div>
{%endblock%}

Но я не понимаю, почему работает document.on ('submit', '# formi') {}?

Answer 2

Редактировать onSubmit событие как

$("#formi").submit(function(event){
    event.preventDefault();
    $.ajax({
         /* you have type here change it to method */
         method:"POST",
         url:"{% url 'haha:ajax' %}",
         data: {
            username : $('#username').val(),
            password : $('#password').val(),
            csrfmiddlewaretoken: {% csrf_token %},
         },

         success: function(data){
         alert('asdas');
         },
    });
}

По умолчанию onSubmit обновляет страницу всякий раз, когда мы отправляем форму.К event.preventDefault(); мы приостанавливаем это поведение по умолчанию.