Javascript 如何从html模板将数据从django传递到js

我有下面提到的以下文件，我想知道如何在index.html文件中将django用户名传递给js

view.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})

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

models.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})

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>

<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>

document.querySelector（“#房间名称输入”）.focus（）；
document.querySelector（“#房间名称提交”）.onclick=function（e）{
var roomName=document.querySelector（“#room name input”）.value；
var userName=JSON.parse（{{userName | safe}}）；
window.location.replace（roomName+'/？username='+username）；
};

尝试使用引号将Django变量包装到js中。例如：

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

---

我通过在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})

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>

<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>

document.querySelector（“#房间名称输入”）.focus（）；
document.querySelector（“#房间名称提交”）.onclick=function（e）{
var roomName=document.querySelector（“#room name input”）.value；
var userName={{userName}
console.log（用户名）；
window.location.replace（roomName+'/？username='+username）；
};