在Django中使用jQuery和AJAX动态更新Web API结果

问题描述

我有这个Django应用，可调用超过450,000个游戏的网络API（RAWG.IO）。我正在尝试使用户能够搜索游戏并获取列表或该搜索结果的索引。问题在于该API是用多个页面构建的，因此第一个调用有效，而list是第一个页面，但是我发现很难从任何其他页面获取结果。

我正在尝试使用jQuery / AJAX和“加载更多游戏”按钮来将当前列表平滑地更改为具有下一组结果的另一个列表，但我遇到了麻烦。我遇到了错误。

错误：（当我的JS中的if（url）语句被忽略时）

lazy_load.js:39 Uncaught TypeError: Cannot read property 'forEach' of undefined
    at Object.loadMoreGames [as success] (lazy_load.js:39)
    at j (jquery.js:3148)
    at Object.fireWith [as resolveWith] (jquery.js:3260)
    at x (jquery.js:9314)
    at XMLHttpRequest.b (jquery.js:9718)

* 否则所有变量将变为null且未定义，这只会使我跳到else语句

模板：

{% extends 'base.html' %}
{% load static %}


{% block pagetop %}
{% endblock %}

{% block appcontent %}

<div class="form-container">
  <form method="POST">
    {% csrf_token %}
    <input type="text" name="search" id="search">
    <input type="submit" id="games" class="btn btn-primary" value="Search Games">
  </form>
</div>

<div class="game-index-container">
  <h1>Games</h1>
  <ul class="game-list">
    {% for game in games %}
    <li class="game-item">
      <h4 class="game-info">{{ game.name }} : {{ game.id }}</h4>
    </li>
    {% endfor %}
  </ul>
</div>
<div class="load-more-games">
  <a class="btn btn-primary more-games" href="javascript:void(0)">Load More Games</a>
</div>
{% endblock %}

{%  block javascript %}
{{ block.super }}
<script src="{% static 'js/lazy_load.js' %}"></script>
{%  endblock %}

查看：（用于加载模板并获取首页的结果）

def find_games(request):
    games = []

    if request.method == 'POST':
        user_input = request.POST.get('search')
        url = 'https://api.rawg.io/api/games?search=%s' % user_input
        response = requests.get(url)
        data = response.json()
        for game in data['results']:
            items = {'name': game["name"],'id': game["id"]}
            games.append(items)
    return render(request,'search/find_game_id.html',{'games': games})

和

jQuery / AJAX：

$(document).ready(function () {
  var input;
  var results;
  var next;
  var url = '';
  $('#games').click(function () {
    input = $('#search').val();
    url = `https://api.rawg.io/api/games?search=${input}`;
    $.ajax({
      url: url,type: 'GET',dataType: 'json',success: function (data,textStatus,xhr) {
        console.log(url);
        console.log('Total Games: ' + data.count);
        console.log('Number Of Pages: ' + data.count / 20);
        console.log(data.results);
        next = data.next;
        url = next;
      },error: function (xhr,errorThrown) {
        console.log('Error in API Call!');
      },});
  });

  $('.more-games').click(function () {
    dict = [];
    url = url;
    console.log(url);
    $.ajax({
      url: url,data: 'json',xhr) {
        results = data.results;
        console.log(results);
        url = data.next;
        if (url) {
          results.forEach((game) => {
            dict.push({
              name: game.name,id: game.id,});
          });
          $('.game-item').each(function () {
            for (var item in dict) {
              $('.game-info').html(`${item.name} : ${item.id}`);
            }
          });
        } else {
          $('.game-list').html('<li><h4>No More Games To Load!</h4></li>');
        }
      },});
    if (url) {
      console.log(url);
    }
  });
});

// function createNode(element) {
//   return document.createElement(element);
// }

// function append(parent,el) {
//   return parent.appendChild(el);
// }

// let ul = document.getElementById('games');
//

// fetch(url)
//   .then((response) => response.json())
//   .then(function (data) {
//     let dict = [];
//     let results = data.results;
//     console.log(results);
//     results.map(function (game) {
//       dict.push({
//         name: game.name,//         id: game.id,//       });
//     });
//     let next = data.next;
//     while (next) {
//       url = next;
//       fetch(url)
//         .then((response) => response.json())
//         .then(function (more_data) {
//           let results = more_data.results;
//           results.map(function (more_games) {
//             dict.push({
//               name: more_games.name,//               id: more_games.id,//             });
//           });
//           next = more_data.next;
//         });
//     }
//     console.log(dict);
//     return dict.map(function (obj) {
//       let li = createNode('li'),//         h4 = createNode('h4');
//       h4.innerHTML = `${obj.name} : ${obj.id}`;
//       append(li,h4);
//       append(ul,li);
//     });
//   })
//   .catch(function (error) {
//     console.log(error);
//   });

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）