如何在 Django 框架中将数据传递给 javascript？

Django 是一个用于 web 开发的Python框架，适用于 jinja2 模板引擎。当数据在通过views.py 后与模板一起呈现时，该数据在呈现它的html 文件上变为静态。由于 django 是一个后端框架，因此要使用Python的强大功能来动态使用该数据，需要生成请求。这些请求可以是 GET、POST、AJAX 等类型。但是，在不调用后端的情况下，动态使用该数据的唯一方法是将其传递给 JavaScript。通常将一些值传递给 JavaScript 就可以了。但有时需要传递整个数据字典。这可以使用 JSON 和 django 模板标签来完成。

要查看更多关于Python中的 django 框架的信息，请访问 – Django 教程。

在“views.py”文件中——

from django.shortcuts import render
from json import dumps
  
  
def send_dictionary(request):
    # create data dictionary
    dataDictionary = {
        'hello': 'World',
        'geeks': 'forgeeks',
        'ABC': 123,
        456: 'abc',
        14000605: 1,
        'list': ['geeks', 4, 'geeks'],
        'dictionary': {'you': 'can', 'send': 'anything', 3: 1}
    }
    # dump data
    dataJSON = dumps(dataDictionary)
    return render(request, 'main / landing.html', {'data': dataJSON})

在“landing.html”文件中——

    
        
            
                Dictionary Data
            
            
                All Data
            
            
            
                Neat Data
            
            
        
    



    var data = JSON.parse("{{data|escapejs}}");
    var dataNode = document.getElementById('alldata');
    dataNode.innerHTML+="{{data|escapejs}}";
    dataNode = document.getElementById('neatdata');
    for(var x in data){
        dataNode.innerHTML+=x+' : '+data[x]+'<br><br>';
    }

输出：

现在，“字典”的值与我们在Python中输入的值不同。这是因为 JavaScript 将字典视为单独的对象，因此要查看这些对象的数据，我们必须在 JavaScript 中单独指定。

用例 –

让我们使用 Django 创建一个相反的 finder 网站。我们会将单词之间的相反关系提供给Python ，并将其发送给 JavaScript，以根据用户的输入确定输出。

在“views.py”文件中——

from django.shortcuts import render
from json import dumps
  
  
def opposites(request):
    # create data dictionary
    data = [
        ["Laugh", "Cry"],
        ["Even", "Odd"],
        ["Hot", "Cold"],
        ["Light", "Dark"],
        ["Opposite", "Same"],
        ["Far", "Near"],
        ["Give", "Take"],
        ["Night", "Day"],
        ["Import", "Export"],
        ["Hard", "Easy"],
        ["Never", "Always"],
        ["Late", "Early"],
        ["Less", "More"],
        ["Male", "Female"],
        ["Happiness", "Sadness"],
        ["Fast", "Slow"],
        ["Old", "Young"],
        ["Boy", "Girl"],
        ["Up", "Down"],
        ["Left", "Right"],
        ["Rich", "Poor"],
        ["Love", "Hate"],
        ["Inside", "Outside"],
        ["Bad", "Good"],
        ["Short", "Tall"],
    ]
    data = dumps(data)
    return render(request, "main/opposites.html", {"data": data})

在“opposites.html”文件中——

  Opposite of ?
  
  
  Result : 




  function opposite(){
    var data = JSON.parse("{{data|escapejs}}");
    var input = document.getElementById("input").value;
    var result = document.getElementById("result")
    var flag = 1;
    for(var x in data){
      if(input.toLowerCase()==data[x][0].toLowerCase()){
        result.innerHTML = data[x][1];
        flag=0;
      }
      else if(input.toLowerCase()==data[x][1].toLowerCase()){
        result.innerHTML = data[x][0];
        flag=0;
      }
    }
    if(flag){
      result.innerHTML = "No results found"
    }
  }

输出：

在评论中写代码？请使用 ide.geeksforgeeks.org，生成链接并在此处分享链接。