Javascript отображает необработанный JSON вместо рендеринга HTML-контента, как кнопка «индекс».Javascript

Форум по Javascript
Ответить
Anonymous
 Javascript отображает необработанный JSON вместо рендеринга HTML-контента, как кнопка «индекс».

Сообщение Anonymous »

Я разрабатываю веб-приложение Django, которое позволяет пользователям подписываться друг на друга и просматривать ленту сообщений пользователей, на которых они подписаны. У меня есть кнопка, которая запускает запрос AJAX к представлению Django, предназначенному для извлечения и отображения соответствующих сообщений. Мое представление Django правильно извлекает сообщения от пользователей, на которых подписан текущий вошедший в систему пользователь, и возвращает их в виде ответа JSON. Однако когда мой код JavaScript получает этот ответ, он не отображает сообщения на странице в формате HTML. Вместо этого браузер отображает необработанные данные JSON. Я ожидаю, что JavaScript будет использовать данные JSON для обновления страницы визуализированным HTML-содержимым, представляющим сообщения, но этого не происходит. Как я могу гарантировать, что мой JavaScript правильно обрабатывает JSON и отображает сообщения в формате HTML?
спасибо за помощь ❤️
post.js:
document.addEventListener('DOMContentLoaded', function() {
// Use buttons to toggle between views
const index = document.querySelector('#index')
const following = document.querySelector('#following')

if(index) {
index.addEventListener('click', () => load_data('index'));
}

if (following) {
following.addEventListener('click', () => load_data("following"));
}

// By default, load the index
load_data('index');
});

function load_data(type) {
console.log("type:", type);
let url;
if (type == "index") {
url = "/post"
} else if (type == "following") {
url = "/following"
} else {
return
}
console.log("url: ", url)
fetch(url)
.then(response => response.json())
.then(posts => {
console.log("posts:", posts);
const postsContainer = document.querySelector("#postsContainer");
if(postsContainer) {
postsContainer.innerHTML = '';
}
posts.forEach(post => {
.....
}

layout.html:
[*]
All Posts

{% if user.is_authenticated %}
[*]
New Post

[*]
Following


views.py:
@login_required
def following(request):
user = request.user
user_followings = Follow.objects.filter(follower=user)
posts = []
for user_following in user_followings:
posts.extend(Post.objects.filter(user=user_following.followed).order_by('-date'))

return JsonResponse([post.serialize() for post in posts], safe=False)


Подробнее здесь: https://stackoverflow.com/questions/793 ... e-the-inde
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»