Django Ajax表单提交，如何从表单中获取特定的模型字段

Question

对于我的项目，我需要能够通过ajax提交表单，而无需刷新页面。我有一个名为Post的模型，它有三个领域:动物、图像和描述。

这是我的模特的照片

class Post(models.Model):
BISON = 'Bison'
WOLF = 'Wolf'
ELK = 'Elk'
BLACKBEAR = 'Black Bear'
GRIZZLY = 'Grizzly Bear'
MOOSE = 'Moose'
MOUNTAINLION = 'Mountain Lion'
COYOTE = 'Coyote'
PRONGHORN = 'Pronghorn'
BIGHORNSHEEP = 'Bighorn Sheep'
BALDEAGLE = 'Bald Eagle'
BOBCAT = 'Bobcat'
REDFOX = 'Red Fox'
TRUMPETERSWAN = 'Trumpeter Swan'
YELLOWBELLIEDMARMOT = 'Yellow-bellied Marmot'
RIVEROTTER = 'River Otter'
LYNX = 'Lynx'
SHREW = 'Shrew'
PIKA = 'Pika'
SQUIRREL = 'Squirrel'
MULEDEER = 'Mule Deer'
SANDHILLCRANE = 'Sandhill Crane'
FLYINGSQUIRREL = 'Flying Squirrel'
UINTAGROUNDSQUIRREL = 'Uinta Ground Squirrel'
MONTANEVOLE = 'Montane Vole'
EASTERNMEADOWVOLE = 'Eastern Meadow Vole'
BUSHYTAILEDWOODRAT = 'Bushy-tailed Woodrat'
CHIPMUNK = 'Chipmunk'
UINTACHIPMUNK = 'Uinta Chipmunk'
WHITETAILEDJACKRABBIT = 'White-tailed Jackrabbit'
BEAVER = 'Beaver'
AMERICANMARTEN = 'American Marten'
MOUNTAINCHICKADEE = 'Mountain Chickadee'
BOREALCHORUSFROG = 'Boreal Chorus Frog'
CUTTHROATTROUT = 'Cutthroat Trout'
GREATHORNEDOWL = 'Great Horned Owl'
SNOWSHOEHARE = 'Snowshoe Hare'
ROCKYMOUNTAINELK = 'Rocky Mountain Elk'
NORTHWESTERNWOLF = 'Northwestern Wolf'
BLACKFOOTEDFERRET = 'Black-footed Ferret'
WOLVERINE = 'Wolverine'
ANIMALS = [
    (BISON, ('Bison')),
    (WOLF, ('Wolf')),
    (ELK, ('Elk')),
    (BLACKBEAR, ('Black Bear')),
    (GRIZZLY, ('Grizzly Bear')),
    (MOOSE, ('Moose')),
    (MOUNTAINLION, ('Mountain Lion')),
    (COYOTE, ('Coyote')),
    (PRONGHORN, ('Pronghorn')),
    (BIGHORNSHEEP, ('Bighorn Sheep')),
    (BALDEAGLE, ('Bald Eagle')),
    (BOBCAT, ('Bobcat')),
    (REDFOX, ('Red Fox')),
    (TRUMPETERSWAN, ('Trumpeter Swan')),
    (YELLOWBELLIEDMARMOT, ('Yellow-bellied Marmot')),
    (RIVEROTTER, ('River Otter')),
    (LYNX, ('Lynx')),
    (SHREW, ('Shrew')),
    (PIKA, ('Pika')),
    (SQUIRREL, ('Squirrel')),
    (MULEDEER, ('Mule Deer')),
    (SANDHILLCRANE, ('Sandhill Crane')),
    (FLYINGSQUIRREL, ('Flying Squirrel')),
    (UINTAGROUNDSQUIRREL, ('Uinta Ground Squirrel')),
    (MONTANEVOLE, ('Montane Vole')),
    (EASTERNMEADOWVOLE, ('Eastern Meadow Vole')),
    (BUSHYTAILEDWOODRAT, ('Bushy-tailed Woodrat')),
    (CHIPMUNK, ('Chipmunk')),
    (UINTACHIPMUNK, ('Uinta Chipmunk')),
    (WHITETAILEDJACKRABBIT, ('White-tailed Jackrabbit')),
    (BEAVER, ('Beaver')),
    (AMERICANMARTEN, ('American Marten')),
    (MOUNTAINCHICKADEE, ('Mountain Chickadee')),
    (BOREALCHORUSFROG, ('Boreal Chorus Frog')),
    (CUTTHROATTROUT, ('Cutthroat Trout')),
    (GREATHORNEDOWL, ('Great Horned Owl')),
    (SNOWSHOEHARE, ('Snowshoe Hare')),
    (ROCKYMOUNTAINELK, ('Rocky Mountain Elk')),
    (NORTHWESTERNWOLF, ('Northwestern Wolf')),
    (BLACKFOOTEDFERRET, ('Black-footed Ferret')),
    (WOLVERINE, ('Wolverine'))
]

animal = models.CharField(max_length=32, choices=ANIMALS, default=BISON)
image = models.ImageField(upload_to='images', default='static/images/yellowstonelake.jpg')
description = models.TextField(null=True, blank=True)

def __str__(self):
    return self.animal

这是我的form.py的照片

class PostForm(ModelForm):
class Meta:
    model = Post
    fields = '__all__'

这是我的视图页面的图片

def homePage(request):
form = PostForm()
if request.method == 'POST':
    animalType=request.POST['animal']
    new_post = Post(animal=animalType)
    new_post.save()

context = {'form': form}
return render(request, 'home.html', context)

我相信问题就在我用来提交表单的javascript中，而不是刷新页面。我能够成功地通过表单提交，但是我的.部分中的数据：{.}部分一定是不正确的?我指的是下面图像中的第651行。</div><div><a href="https://i.stack.imgur.com/O3kGD.jpg">ajax javascript img</a></div><pre><code> &lt;script type=&quot;text/javascript&quot;&gt; $(document).on('submit','#post-form',function(e){ e.preventDefault(); $.ajax({ type:'POST', url:'', data: { animal:$(&quot;form&quot;).val(), csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(), }, success:function(data){ alert(&quot;success!&quot;) } }) }); &lt;/script&gt;</code></pre><div>我需要这个价值不仅仅是：</div><div>动物：$(“form).val()</div><div>因为每当我提交这个并进入我的项目的后端管理站点，我无法编辑我的文章，他们只是我的数据库中的空对象。理想情况下，我希望这个值是用户选择的动物的名称。我尝试过使用诸如$(“form.model.animal”)、.val()或$(“form”).val(动物)之类的值，但是我没有运气。</div><div>这是我的后端管理网站的样子，与一些“成功”的提交。请让我知道我，你可以看到我在哪里的错误和如何解决这个恼人的问题！谢谢!</div><div><a href="https://i.stack.imgur.com/VfkLb.png">行政职位网页</a></div><div>表单字段模板：</div><pre><code>const postpopup = new mapboxgl.Popup({ offset: [0, -15] }) .setLngLat([lt, lg]) .setHTML( `&lt;h1&gt;Yellowmap :) Post Forum&lt;/h1&gt; &lt;div style=&quot;margin-left: 40px;&quot;&gt; &lt;form id=&quot;post-form&quot;&gt; {% csrf_token %} {{form}} &lt;input type=&quot;submit&quot;/&gt; &lt;/form&gt; &lt;p&gt;&lt;/p&gt; &lt;/div&gt;` )</code></pre><div></div>

Answer 1

代码中的一切都很好，您只需稍微修改一下AJAX代码即可。还有你的views.py文件。

阿贾克斯

    $(document).on('submit', '#post-form', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: "{% url 'insert_form' %}",
            data:
                {
                    animal: $("#id_animal").val(),
                    image: $("#id_image").val(),
                    description: $("#id_description").val(),
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
            success: function () {
                alert("success!")
            }
        })
    });

views.py

def homePage(request):
    form = PostForm()
    if request.method == 'POST':
        form = PostForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            return HttpResponse('')

    context = {'form': form}
    return render(request, '.html', context)