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

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> 的值而无需重新加载页面。

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

我们还需要写一个新的 view.py 或让 wagtail 有一些方法吗？

更新

感谢来自 wagtail slack 社区的@Ben-Dickinson。他向 documentation 分享了一个 link，其中指出了如何解决此类问题。

我这里还有一个问题。如何将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 帮助的结果，你可以在这里找到这个主题

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] 是因为我的数据 returns 两个比赛的数据库，我只需要第一个

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

Refresh page without reload. Wagtail

django

ajax

wagtail