How to insert data to the database using Django and AJAX? - ajax

Question

I have a simple webpage that allows the user to enter data using form.
I am using Django with Ajax in order to enter the new records into the database.
The problem is that once the user choose the webpage the system display the below error:
MultiValueDictKeyError at /addperson/ 'na'
Request Method: GET
Request URL: http://127.0.0.1:8000/addperson/
Django Version: 2.1.3
Exception Type: MultiValueDictKeyError
Exception Value: 'na'
Exception Location: C:\Users\LT GM\AppData\Local\Programs\Python\Python37\lib\site-packages\django\utils\datastructures.py in getitem, line 79
Python Executable: C:\Users\LT GM\AppData\Local\Programs\Python\Python37\python.exe
Python Version: 3.7.1
Python Path: ['C:\Users\LT ' 'GM\Downloads\Django-Related-DropDowns-master\Django-Related-DropDowns-master', 'C:\Users\LT GM\AppData\Local\Programs\Python\Python37\python37.zip', 'C:\Users\LT GM\AppData\Local\Programs\Python\Python37\DLLs', 'C:\Users\LT GM\AppData\Local\Programs\Python\Python37\lib', 'C:\Users\LT GM\AppData\Local\Programs\Python\Python37', 'C:\Users\LT ' 'GM\AppData\Local\Programs\Python\Python37\lib\site-packages']
Server time: Mon, 4 Mar 2019 07:10:33 +0000
models.py
class Person(models.Model):
boolChoice = (
("Male","M"),("Female","F")
)
name = models.CharField(max_length=50)
date = models.DateTimeField()
description = models.TextField()
gender = models.BooleanField(choices= boolChoice)
def __str__(self):
return str(self.name)
urls.py
from django.urls import path, include
from django.contrib import admin
from map import views as mapviews
admin.autodiscover()
urlpatterns = [
path('admin/', admin.site.urls),
path('', mapviews.index),
path('addperson/',mapviews.addperson),
]
addperson.html
{% extends 'base.html' %} {% block content %}
<div class="hero__content">
<form method="POST" class="form-style-9">
{% csrf_token %} {{ form.as_p }}
<ul>
<script
type="text/javascript"
src="http://code.jquery.com/jquery-latest.min.js"
></script>
<li>
{#
<input
type="number"
name="field1"
class="field-style field-split align-right"
placeholder="اﻟﺴﻨﺔ"
id="year"
/>
#} {#
<input
type="date"
name="field2"
class="field-style field-split align-left"
placeholder="اﻟﺘﺎﺭﻳﺦ"
id="date"
/>
#}
<h2>Add Member</h2>
</li>
<li>
<input
type="text"
name="name"
class="field-style field-split align-right"
placeholder="enter ur name "
id="name"
/>
</li>
<li>
<input
type="text"
name="date"
class="field-style field-full align-none"
placeholder=" your birthdate"
id="birthdate"
/>
</li>
<li>
<input type="radio" name="gender" id="male" value="male" /> Male<br />
<input type="radio" name="gender" id="female" value="female" />
Female<br />
</li>
<li>
<textarea
name="description"
class="field-style"
placeholder="introduce yourself "
id="description"
></textarea>
</li>
<li>
<input
type="submit"
class="field-style field-full align-none"
id="save"
value="ADD"
/>
<script type="text/javascript">
$(function() {
$("#save").on("click", function(e) {
e.preventDefault();
name = $("#name").val();
birthdate = $("#birthdate").val();
description = $("#description").val();
radioValue = $("input[name = 'gender']:checked").val();
alert("radioValue =", radioValue);
$.ajax({
url: "/create/te2chira",
method: "POST",
data: {
na: name,
bi: birthdate,
de: description,
ra: radioValue
},
headers: {
"X-CSRFToken": "{{csrf_token}}"
}
})
.done(function(msg) {
document.location = "/home.html";
alert("ﻟﻘﺪ ﺗﻢّ ﺣﻔﻆ اﻟﻤﻌﻠﻮﻣﺎﺕ");
})
.fail(function(err) {
alert("ﻟﻢ ﻳﺘﻢ اﻟﺤﻔﻆ");
});
});
});
</script>
</li>
</ul>
</form>
</div>
{% endblock %}
views.py
def addperson(request):
name = request.POST['na']
birthdate = request.POST['bi']
description=request.POST['de']
radiovalue=request.POST['ra']
person=Person.objects.create(
name=name,date=birthdate,description=description,
gender=radiovalue
)
person.save()
return render(request,'./home.html')

Answer 1

Note that your URL pattern ends in a slash, but the URL your using in the Ajax call doesn't.
What's happening is that Django is automatically redirecting you from
/addperson to /addperson/. But a redirect is always a GET, so all your data is lost and therequest. POST lookups fail.
The solution is simply to use /addperson/ in the Ajax call, although you probably want to make the view more robust in any case.

Answer 2

Fetch data using get method
def addperson(request):
data = request.POST
name = data.get('na', '')
birthdate = data.get('bi', '')
description= data.get('de', '')
radiovalue= data.get('ra', '')
person=Person.objects.create(
name=name,date=birthdate,description=description,
gender=radiovalue
)
person.save()
return render(request,'./home.html')