如何从 django 将数据从 html 模板传递给 js答案

【问题标题】：How to pass data from django to js from html template如何从 django 将数据从 html 模板传递给 js
【发布时间】：2021-08-26 19:52:40
【问题描述】：

我有下面提到的以下文件，我想知道如何将 django 用户名传递给 index.html 文件中的 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})

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

【问题讨论】：

标签： javascript json django

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我通过使用 from django.utils.safestring import mark_safe 和 views.py 文件中的 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 = {{ username }}
                console.log(userName);
                window.location.replace(roomName+ '/?username=' + userName);
            };
</script>

【讨论】：