Javascript 在提交到数据库之前使用Ajax接收到期总金额

在我向数据库提交任何内容之前，尝试使用Ajax计算和显示总和。目前，这是我所拥有的，但我似乎无法得到任何东西来展示。我试着从小事做起，看看我是否能在字段中显示值。。我对最终价格的看法是否错误？还是我在Jquery的某个地方搞砸了？我对Ajax还是新手，所以我不确定哪里出了问题（以下是教程）

这是我的桌子模型

class book(models.Model):
    user = models.ForeignKey(
        settings.AUTH_USER_MODEL,
        on_delete=models.CASCADE,
    )
    book_price = models.IntegerField()
    delivery_charge = models.IntegerField()
    delivery_type = models.IntegerField()
    final_result = models.IntegerField()

    def save(self, *args, **kwargs):
       self.final_result = self.book_price + self.delivery_charge + self.delivery_type
       print(self.final_result)
    super(book, self).save(*args, **kwargs)

表单的views.py

def final_price(request):
    response_data = {}
    if request.method == 'POST':
        form = RequestForm(request.POST)
        book_price = request.POST.get('book_price')
        delivery_charge = request.POST.get('delivery_charge')
        delivery_type = request.POST.get('delivery_type')

        response_data['book_price'] = book_price
        response_data['delivery_charge'] = delivery_charge
        response_data['delivery_type'] = delivery_type

        book.objects.create(book_price=book_price, delivery_charge=delivery_charge,delivery_type=delivery_type)
        return JsonResponse(response_data)
        if form.is_valid():
            instance = form.save(commit=False)
            instance.user = request.user
            instance.save()
            return redirect('final_price')
    else:
        form = RequestForm()
        args = {'form': form}
        return render(request, 'final_price.html', args)

用于编辑“我的书本”模块中的字段的模型

class RequestForm(forms.ModelForm):
    class Meta:
        model = book
        fields = (
        'book_price',
        'delivery_charge',
        'delivery_type',
        )

Html文件

{% extends 'base.html' %}

{% block content %}    
  <form class="post" method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit" name="button">Submit</button>
  </form>
  <br>
  <button onclick="myFunction()">Get Quote</button>
  <script type="text/javascript">
    function myFunction(){
      $('.ajaxProgress').show();
      $.ajax({
        type: "POST",
        url: "/final_price",
        dataType: "json",
        async: true,
        data:{
          csrfmiddlewaretoken: '{{ csrf_token }}',
          book_p: $('#book_price').val(),
        },
        success: function(json){
          $('#output').html(json.message);
          $(.ajaxProgress).hide();
        }
      });
    }
  </script>
{% endblock %}

---

这应该对你有帮助。你能不能也显示一下这个添加的URL.py的URL，我会查看这个链接，不要认为我读到了，这应该对你有帮助。你能不能也显示一下这个添加的URL.py的URL，我会查看那个链接，我想我还没读过

{% extends 'base.html' %}

{% block content %}    
  <form class="post" method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit" name="button">Submit</button>
  </form>
  <br>
  <button onclick="myFunction()">Get Quote</button>
  <script type="text/javascript">
    function myFunction(){
      $('.ajaxProgress').show();
      $.ajax({
        type: "POST",
        url: "/final_price",
        dataType: "json",
        async: true,
        data:{
          csrfmiddlewaretoken: '{{ csrf_token }}',
          book_p: $('#book_price').val(),
        },
        success: function(json){
          $('#output').html(json.message);
          $(.ajaxProgress).hide();
        }
      });
    }
  </script>
{% endblock %}

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