如何使用Django和AJAX将数据插入数据库？

Question

我有一个简单的网页，允许用户使用表格输入数据。 我将Django与 Ajax 一起使用，以便将新记录输入数据库。 问题在于，一旦用户选择了网页，系统就会显示以下错误：

  

/ addperson /'na'处的MultiValueDictKeyError        请求方法：GET        要求网址：http://127.0.0.1:8000/addperson/        Django版本：2.1.3        异常类型：MultiValueDictKeyError        异常值：“ na”        异常位置： getitem 中的C：\ Users \ LT GM \ AppData \ Local \ Programs \ Python \ Python37 \ lib \ site-packages \ django \ utils \ datastructures.py，第79行        Python可执行文件：C：\ Users \ LT GM \ AppData \ Local \ Programs \ Python \ Python37 \ python.exe        python版本：3.7.1        Python路径：['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']        服务器时间：2019年3月4日星期一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

请注意，您的URL模式以斜杠结尾，但是您在Ajax调用中使用的URL却不是。

正在发生的事情是Django自动将您从   / addperson到/ addperson /。但是重定向始终是GET，因此您的所有数据都会丢失，request. POST查找也会失败。

解决方案只是在Ajax调用中使用/ addperson /，尽管在任何情况下您都可能希望使视图更健壮。

Answer 2

使用get方法获取数据

  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')