Question

基本上，代码可以按我预期的那样工作，但是ListView没有刷新。一切正常，但模板本身无法加载，我必须按下重新加载按钮（然后所有数据均正确加载）。

我完成了简单的表单/输入以进行测试，并且视图没有问题。我的项目需要日历小部件来选择月份，而在互联网上找到的最简单的方法是Ajax方法。

Ajax函数：

$(document).ready(function () {
            $(function () {
                $("#datetimepicker1").datetimepicker({

                        viewMode: 'months',
                        format: 'MM/YYYY',
                }).on('dp.change', function (e) {
                    var url = "/booking/update_months/{{hotel_id}}";
                    $.ajax({
                        type: 'GET',
                        url: url,
                        dataType: 'json',
                        data: {
                            month: e.date.month(),
                        },
                        success: function (data) {
                        },
                        error: function (data) {
                        }
                    });
                })

            });
        });

网址“ / booking / update_months / {{hotel_id}}”指的是我为此功能使用的第一个View功能：

@csrf_exempt
def update_months(request, hotel_id):
    if request.GET.get('month'):
        month = request.GET.get('month')
        request.session['month'] = int(month) + 1
        return HttpResponseRedirect(reverse('booking:hotel_statistics', args=(hotel_id,)))
    else:
        return render_to_response(request, 'booking/hotel_statistics.html')

然后在HotelStatistics ListView中，我正在get_context_data函数中进行一些操作，在这里没什么特别的。仅通过一些“打印”，我就测试了代码正在执行直到类结束。

class HotelStatistics(ListView):
    model = Reservation
    context_object_name = 'reservations'
    template_name = 'booking/hotel_statistics.html'

    def get_context_data(self, **kwargs):
    .
    .
    .
    return context

我很确定我缺少Ajax功能，这是我使用这种语言的第一种方法。预先感谢您的帮助。

Answer 1

您为什么在这里使用AJAX？除非我遗漏了什么，否则您应该只将日期选择器放在提交的HTTP GET表单中。

template.html

<!-- The action attribute hardcoded URL value should be replaced with a Django url templatetag. This will allow the url to be resolved based on the router configuration. i.e. {% url "booking:update_months" hotel_id %} --> 
<form action="/booking/update_months/{{ hotel_id }}" method="GET">
  <input id="date" name="date">
  <button type="submit">Update</button>
</form>

<script>
$(document).ready(function() {
  $("#date").datetimepicker({
    viewMode: 'months',
    format: 'yyyy-mm-dd',
  });
});
</script>

view.py

@csrf_exempt
def update_months(request, hotel_id):
  date = request.GET.get("date")

  if date:
    request.session["month"] = datetime.strptime(date, "%Y-%m-%d").month
    return redirect("booking:hotel_statistics", False, hotel_id)

  return render(request, "booking/hotel_statistics.html")

上面的代码提交了一个HTTP GET表单，导致服务器端301，并因此“刷新”了具有更新会话数据的统计信息页面。

注意，我们正在发送完整的日期信息。我不确定是否要单独执行此操作，但是如果允许用户独立更新每个日期部分，现在可以将其合并到单个update_date函数中。

如何通过Ajax加载Django ListView

1 个答案: