如何将 django 中的数据从 html 模板传递给 js

Question

I have following files as mentioned below and I want to know how can I pass the django username to js in the index.html file

view.py file

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

models.py file

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

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

Try using quotation to wrap the Django variable in the js. For example:

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

Answer 3

I solved this by using from django.utils.safestring import mark_safe with the json.dumps in the views.py file

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 = {{ username }}
                console.log(userName);
                window.location.replace(roomName+ '/?username=' + userName);
            };
</script>