How to insert data to the database using Django and 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')