如何使用 Django 发布表单而不重新加载页面答案

【问题标题】：How to POST a form with Django and not reload the page如何使用 Django 发布表单而不重新加载页面
【发布时间】：2018-12-28 18:44:36
【问题描述】：

我正在开发一个用户将提交值的应用程序，我想在提交时隐藏包含表单的 div 并显示包含结果的 div。目标是让他们提交表单并显示不同的隐藏 div。我在 Django 代码或 Javascript 上做错了什么？

views.py

from django.shortcuts import render
from .models import VintageMac
from .forms import VintageMacForm

def home(request):
    if request.method == "POST":
        form = VintageMacForm(request.POST)
        if form.is_valid():
            form.save()
            form = VintageMacForm()
    else:
        form = VintageMacForm()
    return render(request, 'hmwypapp/index.html', {'form': form})

urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
]

models.py

from django.conf import settings
from django.db import models
from django.utils import timezone
from django import forms

class VintageMac(models.Model):
    price = models.IntegerField()

    def publish(self):
        self.save()

    def __str__(self):
        return '%s' % (self.price)

forms.py

from django import forms

from .models import VintageMac

class VintageMacForm(forms.ModelForm):
    class Meta:
        model = VintageMac
        fields = ('price',)

HTML

<div id="submission1">
                    <p class="card-text">Some quick example text to build on the card title.</p>
                    <div class="bottom">
                      <div class="row">
                        <form action="/create_post/" class="w-100" method="POST" id="form1">
                          <div class="col-12">
                            {% csrf_token %}
                              {% for hidden_field in form.hidden_fields %}
                                {{ hidden_field }}
                              {% endfor %}
                            {% for field in form.visible_fields %}
                              <div class="form-control">
                                  {% render_field field min="0" class="form-control" id="amount1" placeholder="Type an amount." %}
                                  {% if field.help_text %}
                                <small class="form-text text-muted">{{ field.help_text }}</small>
                                {% endif %}
                              </div>
                            {% endfor %}
                          </div>
                          <div class="col-12">
                            <button onclick="myFunction1()" class="mt-1 text-center form-control btn submit-btn">Submit <span>????</span></button>
                          </div>
                        </form>
                      <div class="text-center credit mt-2 w-100">Submitted by @peterdenatale</div>
                      </div>
                    </div></div>
                    <div id="results1">
                      <p class="card-text">You said that you would pay <span class="value">$375.00</span> .</p>
                      <div class="bottom">
                          <div class="row">
                              <div class="col-12">
                                  <div class="progress">

                                    <div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%;">
                                    </div>
                                  </div>
                                  <div class="row" style="margin-bottom: -20px;">
                                    <p class="col-4 raised-text"><strong>Min<br>$0.00</strong></p>
                                    <p class="col-4 average-text"><strong>Avg<br>$250.00</strong></p>
                                    <p class="col-4 goal-text"><strong>Max<br>$500.00</strong></p>
                                  </div>
                              </div>
                            </div>
                      </div>
                    </div>

JavaScript

$(document).on('submit','#form1',function(e){
e.preventDefault();

$.ajax({
    type:'POST',
    url: '',
    data:{
        amount: $('#amount1').val(),
    },
    success:function(){
        $('#submission1').fadeOut(500);
        $('#results1').delay(500).fadeIn(500);
    }
});

我尝试将 JavaScript 更改为一堆不同的东西，但它所做的唯一一件事就是重新加载页面。我想摆脱重新加载并留在同一页面上，但仍发布数据并隐藏/显示 div。

【问题讨论】：

标签： javascript python jquery ajax django

【解决方案1】：

排队：

<button onclick="myFunction1()" class="mt-1 text-center form-control btn submit-btn">Submit <span>?</span></button>

删除onclick 处理程序，添加属性type，其值为submit。

更新后的行应如下所示：

<button type="submit" class="mt-1 text-center form-control btn submit-btn">Submit <span>?</span></button>

并将$.ajax选项对象中的url键更新为/create_post/（来自form标签action属性）

【讨论】：

好的。刚刚尝试过，但它仍然无法正常工作。页面只是重新加载。

【解决方案2】：

1- 我认为您忘记关闭 javascript 标记，这就是它不起作用的原因。
2-将提交按钮更改为这样：

<input type="submit" class="mt-1 text-center form-control btn submit-btn" value="Submit"><span>?</span></div>

3- 你忘了在 ajax 中添加 csrf 令牌，应该是这样的：

csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),

干杯:)

【讨论】：