Question

在哪里可以将ajax获取数据代码放在Wagtail中？我有以下页面模型：

class ScreencastPage(Page):
    content_panels = Page.content_panels + [
        InlinePanel(
            'groupstage_screencast_relationship', label="Choose Teams",
            panels=None, max_num=2),
    ]

    parent_page_types = ['home.HomePage']

    def matches(self):
        matches = [
            n.match for n in self.groupstage_screencast_relationship.all()
        ]

        return matches

我的模板：

  {% for spiel in page.matches %}
    {% if forloop.first == forloop.last %}
    <div id="fullscreen">
      <ul class="ulup">
        <li class="logo_bg first_team">{% image spiel.team_1.team_logo width-400 class="logo" %}<p>{{spiel.team_1.title}}</p></li>
        <li class="first_team_score">{{ spiel.team_1_total_score }}</li>
        <li class="colons">:</li>
        <li class="second_team_score">{{ spiel.team_2_total_score }}</li>
        <li class="logo_bg second_team">{% image spiel.team_2.team_logo width-400 class="logo" %}<p>{{spiel.team_2.title}}</p></li>
      </ul>
    </div>
    {% endif %}
  {% endfor %}

我开始写js。刚刚开始：

$(document).ready(function() {
  setInterval(function(){
    $.ajax({
      type: "GET",
      url: {% pageurl page %},
      data: {},
      success: function(data) {
        console.log(data);
        $(".first_team_score").contents()[0].textContent = data.team_1_total_score;
        $(".second_team_score").contents()[0].textContent = data.team_2_total_score;
      }
    })
  }, 10000);
});

我们的想法是，该页面会自动更新<li class="first_team_score">{{ spiel.team_1_total_score }}</li>和<li class="second_team_score">{{ spiel.team_2_total_score }}</li>的值，而无需重新加载页面。

我发现了here很好的例子，但是他们使用了view.py

我们还需要编写一个新的view.py或者为此做一些方法吗？

更新

感谢来自不和谐社区的@ Ben-Dickinson。他分享了documentation的链接，指出如何解决此类问题。

我这里有另一个问题。如何将matches转换为json？

Answer 1

要捕获ajax请求，我们可以使用Page serve()方法并使用if request.is_ajax():。所以我在我的ScreencastPage(Page)内进行了跟踪：

def serve(self, request):
    if request.is_ajax():
        result = [
            {
                'team_1_name': match.team_1.title,
                'team_1_score': match.team_1_total_score,
                'team_2_name': match.team_2.title,
                'team_2_score': match.team_2_total_score,
            }
            for match in self.matches()
        ]
        json_output = json.dumps(result)
        return HttpResponse(json_output)
    else:
        return super(ScreencastPage, self).serve(request)

上面的代码是来自@gasman的帮助结果，您可以在此处找到此主题Converting value to json inside serve method

HTML / JS代码的最终结果是：

<div id="match1">
  <ul class="ulup">
    <li class="logo_bg first_team">{% image spiel.team_1.team_logo width-400 class="logo" %}<p>{{spiel.team_1.title}}</p></li>
    <li class="first_team_score">{{ spiel.team_1_total_score }}</li>
    <li class="colons">:</li>
    <li class="second_team_score">{{ spiel.team_2_total_score }}</li>
    <li class="logo_bg second_team">{% image spiel.team_2.team_logo width-400 class="logo" %}<p>{{spiel.team_2.title}}</p></li>
  </ul>
</div>

JS：

$(document).ready(function() {
  setInterval(function(){
    $.ajax({
      type: "GET",
      url: {% pageurl page %},
      dataType: 'json',
      success: function(data) {
        $("#match1 .first_team").contents()[0].textContent = data[0]["team_1_name"];
        $(".first_team_score").contents()[0].textContent = data[0]["team_1_score"];
        $("#match1 .second_team").contents()[0].textContent = data[0]["team_2_name"];
        $(".second_team_score").contents()[0].textContent = data[0]["team_2_score"];
      }
    })
  }, 10000);
});

data[0]是becoz我的数据返回两个匹配的数据库，我只需要第一个

刷新页面而不重新加载。鸰

1 个答案: