Django 将变量从 Views.Py 动态传递到 Jquery

Question

我很难理解这一点。

我有一本名为 alldicts 的字典，我将它从 Django 中的视图传递到 HTML 中。然后如何将该字典引用到 Jquery 以在我的 HTML 中自动填充输入值？

我在 Views.Py 中的代码：

mydict1 = {
'one' : 1
'two' : 2
'three' : 3
}

mydict2 = {
'one' : 4
'two' : 5
'three' : 6
}

mydict3 = {
'one' : 7
'two' : 8
'three' : 9
}


alldicts={
'mydict1': mydict1,
'mydict2': mydict2,
'mydict3': mydict3
}

return render(request, self.template_name, alldicts)

在我的代码的 HTML 部分，我有一个选择下拉菜单，其中包含“mydict1”、“mydict2”和“mydict3”选项。在它下面我有三个输入（输入的数量将是动态的，但想举一个简单的例子）我想自动填充以匹配所选选项。 （IE 如果我在下拉列表中选择 mydict2，输入（#one、#two 和 #three）将分别填充为 4、5 和 6）。

在 html 中，如果我尝试这样的事情，它不起作用：

$("#hselect").change(function() {

var a = "{{alldicts}}";

var selectedValue = $(this).val();


$.each( a, function(idx, obj) {
   $.each( obj, function(key, value){
       if (selectedValue == idx) {                  
          $('#'+key).val(value);
       }
   });
});


}


<select id = "hselect" name="hselect" style="width: 250px;" onchange="changeoption();">
<option> mydict1 </option>
<option> mydict2 </option>
<option> mydict3 </option>
</select>

<input id='one' ><br>
<input id='two' ><br>
<input id='three' ><br>

这不起作用。但是，如果我通过 HTML 静态传递字典，它确实可以工作。如何从 Views 动态传递？

例如这确实有效：

$("#hselect").change(function() {

var a = {
'mydict1' = {'one' : 1, 'two' : 2, 'three' : 3},
'mydict2' = {'one' : 4, 'two' : 5, 'three' : 6},
'mydict3' = {'one' : 7, 'two' : 8, 'three' : 9},
};

var selectedValue = $(this).val();


$.each( a, function(idx, obj) {
   $.each( obj, function(key, value){
       if (selectedValue == idx) {                  
          $('#'+key).val(value);
       }
   });
});


}


<select id = "hselect" name="hselect" style="width: 250px;" onchange="changeoption();">
<option> mydict1 </option>
<option> mydict2 </option>
<option> mydict3 </option>
</select>

<input id='one' ><br>
<input id='two' ><br>
<input id='three' ><br>

唯一改变的是我如何传递字典、mydicts 和定义变量 a。如何从 Views.Py 动态执行此操作？

Answer 1

1. 您需要确保将 alldicts 中的所有数据类型从 python object 转换为 string 或 number。

2. 将views.py 中的alldicts 从python dict 更改为json format：

import json
json_alldicts = json.dumps(alldicts)

对于jinja template

var a = JSON.parse('{{ json_alldicts | tojson | safe }}');
console.log(a);

对于django template

var a = JSON.parse('{{ json_alldicts | safe }}');
console.log(a);

Answer 2

答案很棘手（更新了我的答案）
现在它动态工作。 HTML

<div id="container"></div>
<div id="inputs"></div>

这是您的对象（console.log 有帮助）： 四个动态我在第一个mydict1中添加了第四个元素

mydict1 = {
  'one': 1,
  'two': 2,
  'three': 3,
  'four': 4
}

mydict2 = {
  'one': 4,
  'two': 5,
  'three': 6
}

mydict3 = {
  'one': 7,
  'two': 8,
  'three': 9
}

alldicts = {
  'mydict1': mydict1,
  'mydict2': mydict2,
  'mydict3': mydict3
}

console.log('alldicts', alldicts);

这些创建动态选择选项框：

var markup = '';
markup += '<select id="hselect" name="hselect" style="width: 250px;">';
$.each(alldicts, function(idx, obj) {
  console.log('obj', idx);
  markup += '<option value="' + idx + '">' + idx + '</option>';
});

markup += '</select>';

$("#container").append(markup);

这是改变选择选项的changeHandler

var markupInputs = '';

$('#hselect').on('change', function() {
  $('#inputs').empty();
  console.log(this.value);
  var option = this.value;
  var elements = {};
  $.each(alldicts, function(idx, obj) {
    console.log('idx', idx)
    if (idx == option) {
      $.each(obj, function(idx1, obj1) {
         elements[idx1] = obj1;
      });
    }
  });
  console.log('arr2', elements);

  $.each(elements, function(index, value) {
    markupInputs += '<input id="' + index + '" value="' + value + '"></input><br>';
  });

  $("#inputs").append(markupInputs);
  markupInputs = '';
});