在视图中创建 JSON 对象并在 HTML 中传递它答案

【问题标题】：Creating a JSON Object in views and passing it in HTML在视图中创建 JSON 对象并在 HTML 中传递它
【发布时间】：2018-04-15 03:21:26
【问题描述】：

views.py - Django 2.0.2

def hotels(request):
    list_of_hotels = Hotel.objects.order_by('hotel_name')
    template = loader.get_template('myapp/hotels.html')

    data = {}
    for each in list_of_hotels:
        data[str(each.hotel_name)] = 'null'
    json_data = json.dumps(data)

    context = {
        'list_of_hotels': list_of_hotels,
        'json_data': json_data,
    }
    return HttpResponse(template.render(context, request))

hotels.html

<div class="row">
  <div class="col s12">
    <div class="row">
      <div class="input-field col s12">
        <i class="material-icons prefix">search</i>
        <input type="text" id="autocomplete-input" class="autocomplete">
        <label for="autocomplete-input">Search</label>
      </div>
    </div>
  </div>
</div>

<script>
  var jsonObj = "{{json_data}}";
  $(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: jsonObj,
    });
  });
</script>

我正在尝试将 Django 视图中的 JSON 对象解析为位于相应 HTML 页面内的脚本。我尝试了一切，但它似乎不起作用。我现在搜索了大约一个小时的 Stack Overflow，并根据所有答案得出了这些 sn-ps 代码，但仍然无法正常工作。任何关于如何去做的线索将不胜感激！

P.S：在hotels.html 的脚本中，数据采用JSON 对象。有关初始化的更多详细信息，请参阅this。

P.P.S：我是 JavaScript/jQuery 的绝对菜鸟。

【问题讨论】：

直接写入 Javascript 变量是不安全的。查看django-argonauts，它提供了实用程序以及如何安全地将 JSON 传递到模板的示例。
感谢您的领导。我会检查一下并更新问题。 :)

标签： javascript json django django-views

【解决方案1】：

经过多次尝试，找到了解决我自己问题的方法。感谢任何试图帮助我的人。 :)

hotels.html

<div class="row">
 <div class="col s12">
  <div class="row">
   <div class="input-field col s12">
    <i class="material-icons prefix">search</i>
    <input type="text" id="autocomplete-input" class="autocomplete">
    <label for="autocomplete-input">Search</label>
   </div>
  </div>
 </div>
</div>

<script type='text/javascript'>
  var jsonObj = {{ json_data|safe }};
  $(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: jsonObj,
    });
  });
</script>

views.py

def hotels(request):

    list_of_hotels = Hotel.objects.order_by('hotel_name')
    template = loader.get_template('myapp/hotels.html')

    data = {}
    for each in list_of_hotels:
        data[str(each.hotel_name)] = None
    json_data = json.dumps(data)

    context = {
        'list_of_hotels': list_of_hotels,
        'json_data': json_data,
    }
    return HttpResponse(template.render(context, request))

【讨论】：