在 Django 中调用 ajax 后数据没有改变

Question

我创建了一个订单表，该表以日期时间格式获取日期，稍后我尝试获取按日期分组的数据，因此我有该特定日期的订单总数和数量。

现在，我正在尝试根据使用 Ajax 调用在日期范围选择器中选择的日期更改表中的数据。但似乎有一些问题没有让我在进行 ajax 调用后获取数据。有人可以帮我指出我哪里出错了吗？

我的看法：

from .models import orders
from django.shortcuts import render
from django.views.decorators.csrf import csrf_exempt


def home(request):
    r_date = orders.objects.raw("SELECT id, SUM(amount) as amount, SUM(total) as total, (SUM(tax)*100/SUM(amount)) as rate, SUM(delivery_fee) as delivery_fee, SUM(tip) as tip, SUM(tax) as tax, SUM(sub_total) as sub_total, CONVERT(report_date, DATE) as report_date, COUNT(id) as count FROM orders Group By DATE(report_date) ORDER BY DATE(report_date) DESC;")
    r = round(r_date[1].rate, 2)
    t = [float(r), 0, 100]
    labels = ['net sales', 'deduction', 'tax']
    context = {"r_date": r_date, 't': t, 'labels': labels}
    return render(request, 'dashboards/demo.html', context)

@csrf_exempt
def datepickerview(request):
    if request.method == 'POST':
        print(request.body)
        a = request.POST.get('fromDate')
        b = request.POST.get('toDate')
        # import code;
        # code.interact(local=dict(globals(), **locals()))
        print(a, b)
        r_date = orders.objects.raw("SELECT id, SUM(amount) as amount, SUM(total) as total, (SUM(tax)*100/SUM(amount)) as rate, SUM(delivery_fee) as delivery_fee, SUM(tip) as tip, SUM(tax) as tax, SUM(sub_total) as sub_total, CONVERT(report_date, DATE) as report_date, COUNT(id) as count FROM orders WHERE DATE(report_date) BETWEEN '2020-06-01' AND '2020-06-19' Group By DATE(report_date) ORDER BY DATE(report_date) DESC")
        context = {"r_date": r_date}
        return render(request, 'dashboards/demo.html', context)

我的 HTML：

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
    <i class="fa fa-calendar"></i>&nbsp;
    <span id="someid"></span> <i class="fa fa-caret-down"></i>
</div>

<div id="message"></div>

<div class="col-lg-6 mb-4">
             <!-- Illustrations -->

              <div class="card shadow mb-4">
                <div class="card-header py-3">
                  <h6 class="m-0 font-weight-bold text-primary">Data</h6>
                  {{ amount }}
                </div>
                 <div class="card-body">
              <div class="table-responsive">
                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">

                  <thead>
                    <tr>
                      <th>Date</th>
                      <th>Amount</th>
                      <th>Total</th>
                      <th>Orders</th>
                    </tr>
                  </thead>
                  <tbody>
                   {% for r in r_date %}
                    <tr>

                      <td>{{r.report_date}}</td>
                      <td>{{r.amount}}</td>
                      <td>{{r.total}}</td>
                      <td>{{r.count}}</td>
                    </tr>

                  {% endfor %}
                    </tbody>
                </table>
              </div>
                 </div>
              </div>
</div>

我的 JS：

<script type="text/javascript">
$(function() {

    var start = moment().subtract(29, 'days');
    var end = moment();

    function cb(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }

    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

    cb(start, end);

});

$( document ).ready(function() {

     $('#reportrange').on('apply.daterangepicker', function(ev, picker) {
      fromDate = picker.startDate.format('YYYY-MM-DD')
      toDate = picker.endDate.format('YYYY-MM-DD')
      console.log(fromDate)

      function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
    const csrftoken = getCookie('csrftoken');


    function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});
    $.ajax({
    type: "POST",
    url: "{% url 'date' %}",
    data: {"fromDate": fromDate, "toDate": toDate},
    success: function () {
    $('#message').html("<h2>Data Posted</h2>")
      }
         });
});

    });

</script>

Answer 1

你的问题一定有什么使命。我没有看到您使用 Ajax 调用的“响应”。我可以在没有看到错误的情况下“猜测”的是 您的 Ajax 成功函数没有接收响应的参数。 所以

    $.ajax({
        type: "POST",
        // use actual url
        url: 'url/to/post/request',
        data: {"fromDate": fromDate, "toDate": toDate},
        success: function (response) {
            // use Ajax response as needed
        }
    });