jquery ajax get call 上的 django 视图呈现的错误 html 模板

Posted 2023-02-24

【中文标题】jquery ajax get call 上的 django 视图呈现的错误 html 模板

【英文标题】：wrong html template rendered by django view on jquery ajax get call

【发布时间】：2012-04-25 19:33:47

【问题描述】：

我的django 应用程序的index.html 页面使用jquery fullcalendar，由名为index() 的django 视图填充，该视图使用simplejson 转储包含当前月份所有日期的事件的数组。该方法呈现index.html模板。

我在点击日历的prev button 时调用ajax get 调用另一个django 视图prev_month()。此方法计算上个月的事件数组并将其转储并最终呈现不同的模板'prev_month.html'

def prev_month(request,year,month):
    ....
    prev_events=[]
    #populates array by making db calls
    return render_to_response('prev_month.html','prev_events':prev_events)

prev_month.html

...
<script>
    $(document).ready(function() 
        $('#calendar').fullCalendar(
       events: prev_events|safe
    );
        $('.fc-button-prev').click(function()
          var d=$('#calendar').fullCalendar('getDate');
          var month=d.getMonth()+1;
          var year=d.getFullYear();
          $.ajax(url:'/myapp/prev_month/'+year+'/'+month,type:"GET",
  success:function()
                    alert('prev_month.html::success');
,
);
);
</script>

模板index.html与上面的模板类似，除了成功警报显示'index.html::success'。它还使用名为index()的django视图传递的current_events填充日历。

django 视图是

def index(request):
   ...
   #creates events array and jsondump
   return render_to_response('index.html','current_events':events_array)

当我进入索引页面时，日历显示当月的所有事件。当点击 prev 按钮时，django 视图 prev_month() 被执行。但由于某种原因，呈现的模板是index.html的prev_month.html 。这从显示index.html::success 的成功警报中可以看出

而不是prev_month.html::success

因此，上个月的事件不显示..

谁能帮我弄清楚为什么会这样？

【参考方案1】：

您的 AJAX 调用的响应未被使用。

您必须更改您的 $.ajax() 调用，以便成功函数实际绑定数据（即来自 Django 服务器的响应）；我们在示例中使用$.get() 使其更易于阅读：

$.get('/myapp/prev_month/'+year+'/'+month, function(data) 
  $('#calendar').fullCalendar(events: data);
);

请参阅http://api.jquery.com/jQuery.get/ 上的 jQuery.get 文档

这应该使用您的fullCalendar() 方法并将接收到的data 作为events 的新值。

查看javascript错误控制台，看看data的格式是否会导致问题；如果是这样，您必须在prev_month() 中以 JSON 格式返回结果。

Django 内部的

prev_month() 会渲染 prev_month.html；问题是您在启动 AJAX 请求后没有更新本地页面模板（即 index.html）。

您能否发布您的索引页面的准确 HTML 输出，包括您在那里使用的 JavaScript？这将有助于解决问题:)

直接调用prev_month()的输出是什么？ HTML？ JSON？您可以扩展 prev_month() 以将 prev_events 打印到 STDOUT...

当我直接调用/myapp/prev_month/2012/3/ 时，我得到了这个输出。 pastebin.com/SUQcDGHe这填充了三月的条目，但网页仍然显示四月。如果我现在点击上一个按钮，三月会显示所有事件。当我只点击上一个按钮时不会发生这种情况

prev_month 视图将其打印到标准输出 它显示了调用/myapp/prev_month/2012/3/ ..pastebin.com/esPKUM56 中给出的所有三月事件。