如何將 django 中的數據從 html 模板傳遞給 js

Question

我有以下文件，如下所述，我想知道如何將 django 用戶名傳遞給 index.html 文件中的 js

查看.py 文件

from django.shortcuts import render
from django.contrib.auth.decorators import login_required

from .models import Message
import json

def index(request):
    return render(request, 'chat/index.html')
@login_required
def room(request, room_name):
    messages = Message.objects.filter(room=room_name)[0:25]

    return render(request, 'chat/room.html', {'room_name': room_name,
     'username': json.dumps(request.user.username),'messages': messages})

模型.py 文件

from django.db import models
from django.contrib.auth import get_user_model


User = get_user_model()

class Message(models.Model):
    username = models.CharField(max_length=50)
    room = models.CharField(max_length=255)
    content = models.TextField()
    date_added = models.DateTimeField(auto_now_add=True)

    class Meta:
        ordering = ('date_added',)

    def __str__(self):
        return self.username

index.html 中的腳本

<script>
            document.querySelector('#room-name-input').focus();

            document.querySelector('#room-name-submit').onclick = function(e) {
                var roomName = document.querySelector('#room-name-input').value;
                var userName = JSON.parse( {{ username|safe }} );
                window.location.replace(roomName + '/?username=' + userName);
            };
</script>

Answer 1

var userName = JSON.parse( `{{ username|safe }}` ); // add quotes

Answer 2

嘗試使用引號將 Django 變量包裝在 js 中。 例如：

var userName = JSON.parse("{{ username|safe }}");

Answer 3

我通過在views.py文件中使用django.utils.safestring import mark_safe和json.dumps解決了這個問題

from django.shortcuts import render
from django.utils.safestring import mark_safe
from django.contrib.auth.decorators import login_required
from django.contrib.auth import get_user_model
from .models import Message
import json

User = get_user_model()
def index(request):
    username = mark_safe(json.dumps(request.user.get_username()))
    return render(request, 'chat/index.html',{'username':username})


@login_required
def room(request, room_name):

    messages = Message.objects.filter(room=room_name)[0:25]

    return render(request, 'chat/room.html', {'room_name': room_name,
     'username': mark_safe(json.dumps(request.user.get_username())),'messages': messages})

索引.html

<script>
            document.querySelector('#room-name-input').focus();

            document.querySelector('#room-name-submit').onclick = function(e) {
                var roomName = document.querySelector('#room-name-input').value;
                var userName = {{ username }}
                console.log(userName);
                window.location.replace(roomName+ '/?username=' + userName);
            };
</script>