Django如何从javascript向数据库添加数据

Question

我在 django 中创建了一个页面，在此页面上我创建了一个按钮，该按钮调用一个 JavaScript 函数，该函数又从 API 获取数据。我的这部分代码按预期工作，因为它将响应数据写入控制台。但是，我似乎无法将该数据插入到我在 django 中创建的模型中。

我不确定 python/javascript/models 是如何链接在一起的。

models.py

from django.db import models


class Set(models.Model):
    scry_id = models.CharField(max_length=255)
    code = models.CharField(max_length=255)
    name = models.CharField(max_length=255)
    set_type = models.CharField(max_length=255)
    release_date = models.DateField()
    card_count = models.IntegerField()
    block_code = models.CharField(max_length=255, null=True)
    block_name = models.CharField(max_length=255, null=True)
    parent_set_code = models.CharField(max_length=255, null=True)
    digital_only = models.BooleanField(default=False)
    foil_only = models.BooleanField(default=False)
    nonfoil_only = models.BooleanField(default=False)
    icon = models.CharField(max_length=255)
    status = models.BooleanField(default=False)

    def __str__(self):
        return self.name

sets.html

{% extends "main/index.html "%}

{% block content %}
  <div class="background card">
    <div class="card-body">
      <button class="btn" id="setRefresh" style="border: 1px solid" onclick="setRefresh()"><i class="fas fa-sync"></i></button>

    </div>
  </div>
{% endblock%}

custom.js

function setRefresh() {
  const Url="https://api.scryfall.com/sets";
  fetch(Url)
    .then(res => res.json())
    .then(data => obj = data.data)
    .then(() => obj.sort(function(a,b){return a.released_at.localeCompare(b.released_at);}))
    .then(() => {
      for (var i = 0; i < obj.length; i++) {
        //console.log(obj[i].name);
      }
    })
}

view.py

def sets(request):
    return render(request,
                  "main/sets.html",
                  {"Sets": Set.objects.all})

Answer 1

有两种方法可以做到这一点

1. 方法 1：检索数据后，将它们发送到您的 django 应用程序，而不是将它们记录到控制台。有一个 django 视图来处理来自包含数据的 js 代码的相应请求，然后将它们添加到数据库中。换句话说，您应该再次获取，但这次是使用发布请求到您的 django 应用程序。

.您的视图应该如下所示：

    from .models import Set
    from django.http import HttpResponse
    import json
    
    def save(request):
        data=json.loads(request.body)
        for entry in data:
            s = Set()
            s.scry_id=entry["scry_id"]
            #in the next lines you map entry fields to Set fields



            s.save()
         return HttpResponse("ok")

1. 方法 2：您的按钮在 click 上调用您的 django 应用程序，然后您的 django 应用程序从 https://api.scryfall.com/sets 本身检索数据，然后将它们保存到数据库中。你的代码应该是这样的

   from .models import Set
   from django.http import HttpResponse
   import json
   import requests
   
   def save(request):
       response = requests.request("GET", "https://api.scryfall.com/sets")
       data=response.json()
       for entry in data:
           s = Set()
           s.scry_id=entry["scry_id"]
           #in the next lines you map entry fields to Set fields
   
   
   
           s.save()
        return HttpResponse("ok")
   

当然在任何一种情况下都不要忘记将你的 urlconf 映射到保存视图

Answer 2

有两个缺失的部分。首先你需要有一个url 来监听变化，然后你需要有一个view 函数来设置数据。并且您需要对代码的JS 部分进行一些更改。下面的示例可以清除它并且它也可以正常工作：

views.py

@ajax_required
def views_name(request):
    try:
        if request.method == 'POST':
            post_id = request.POST.get('post')
            YourModel.objects.create(id=post_id)
    except Exception:   # pragma: no cover
        return HttpResponseBadRequest()

urls.py

urlpatterns = [
    url(r'^whatever/$', views.views_name, name='whatever'),
]

custom.js:

$(function () {
    $(".class-name").click(function () {
        var csrf = $(this).attr('csrf');
        var post = $(this).attr('page-id');
        $.ajax({
            url: '/whatever/',
            data: {
                'post': post,
                'csrfmiddlewaretoken': csrf
                },
            type: 'post',
            cache: false,
            success: function (returned_values) {
                // do whatever you want after success!                
                },
        });
    });
})