Почему моя функция просмотра отображает данные, но они не отображаются в браузере? (АЯКС / Джанго) - PullRequest
Новая
       1

Почему моя функция просмотра отображает данные, но они не отображаются в браузере? (АЯКС / Джанго)

2 голосов
/ 03 октября 2019

Я наконец-то добился того, чтобы мой Javascript on 'click' и AJAX работали в сотрудничестве с моей функцией view, которая вызывает данные из API. Но теперь у меня есть еще одна проблема:

Данные из API гладко передаются в контейнеры html, которые содержат соответствующие переменные. Но в моем браузере я не вижу отображаемого контента?!

Почему это так?

У меня до сих пор не настроена функция успеха в AJAX, так как я понял, что функция представления отрисовывает внешний интерфейс, поэтому в этом случае нет необходимости в функции успеха AJAX?

Заранее большое спасибо за ваш вклад.

Просмотр 

import requests
from django.shortcuts import render
import json


def team_update(request):
    team_id = request.GET.get('team')
    response = requests.get(f'http://www.api-football.com/demo/api/v2/teams/team/{team_id}')
    team_data = response.json()
    teams = team_data.get('api', {}).get('teams', [])
    if teams and len(teams) == 1:
        teams = teams[0]
    return render(request, 'index.html', {
        'name': teams['name'],
        'country': teams['country'],
        'founded': teams['founded'],
        'logo': teams['logo'],
        'venue_capacity': teams['venue_capacity'],
    })

Javascript / Ajax: 

$('ul.subbar li a').on('click', function(e) {
e.preventDefault();
var team_id = $(this).attr("id");
console.log(team_id);
$.ajax({
  method: "GET",
  url: "/dashboard/",
  data: {'team': team_id},
  success: function(response) {
    console.log(response)
    }
  });
});

HTML (ключевая часть): 

      <div class="topRow">
        <div class="team">
          <div class="teamLogo">
            <img class="teamLogo" src="{% static "images/club_flags/Clubs/Germany/FC Bayern München.png" %}" alt="Manchester United">
          </div>
          <div class="selectedClub">{{ name }}</div>
        </div>
      </div>


      <!---End of Top Row and Start of Second row--->

      <div class="secondRow">
        <div class="column">
          <p class="heading">Founded in</p>
          <p class="figure" id="founded">{{ founded }}</p>
        </div>

Отладка: enter image description here

1 Ответ

1 голос
/ 03 октября 2019

Вам нужно использовать данные ответа из функции успеха, а не просто регистрировать их. Я сделаю некоторые предположения относительно вашей страницы, скажем, например, у вас в настоящий момент есть следующее 

<body>

  <!-- all your other stuff on the page -->

  <div id="container-element">
    <div class="topRow">
      <div class="team">
        <div class="teamLogo">
          <img class="teamLogo" src="" alt="">
        </div>
        <div class="selectedClub"></div>
      </div>
    </div>


    <!---End of Top Row and Start of Second row--->

    <div class="secondRow">
      <div class="column">
        <p class="heading">Founded in</p>
        <p class="figure" id="founded"></p>
      </div>
    </div>
</body>

Если именно так настроена ваша страница в настоящее время, то в функции успеха вашего вызова AJAX вы могли бысделайте это: 

$.ajax({
  method: "GET",
  url: "/dashboard/",
  data: {'team': team_id },
  success: function(response) {
    $('container-element').html(response);
  }
});

, который заменит содержимое вашей реальной страницы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...