Page still refreshing while using ajax with django - ajax

Question

I'm using my own custom form. Which looks like:
{%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%}
I've got two input fields with name password and username, to be saved to the table 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')
I've tried with the GET method too. But still the page gets refreshed. Also tried firing the Ajax call while clicking the button, but it says something like multiple-dict value error. Also tried with
username = request.POST.get('username')
password = request.POST.get('password')

Answer 1

Edit onSubmit event as
$("#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');
},
});
}
It is the default behaviour of onSubmit to refresh the page whenever we submit the form. By event.preventDefault(); we are pausing that default behaviour.

Answer 2

Just modified the jquery code, works well!! Here's a code:
{%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%}
But i don't understand why is document.on('submit','#formi'){} is working?