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

【问题标题】：Refresh page without reload. Wagtail刷新页面而不重新加载。鹡鸰
【发布时间】：2018-07-27 03:19:56
【问题描述】：

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

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 或者有一些方法来解决这个问题？

更新

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

我这里还有一个问题。如何将matches转成json？

【问题讨论】：

标签： ajax django wagtail

【解决方案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] 是因为我的数据返回两个匹配的数据库，我只需要第一个

【讨论】：