如何解决在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 举报,一经查实,本站将立刻删除。