2

我是 Python 和 Javascript 编程的新手，我已经学习 Python 几个月了，我很喜欢它。我一直在玩 django，这很酷我想知道如何使这个模型与 Iavascript 一起工作。我希望有人尽可能多地解释所涉及的代码，就像我要全面了解从 django 到 Javascript 的过程一样。

我想动态地是CarModel.objects.filter(make ='somename')或只是'somename'。

这是一个正在使用的测试模型，因为它类似于我用于在线教程 (YouTube) 的 Javascript，脚本也如下所示：

class Make(models.Model):
    name  = models.CharField(max_length=50,blank=True,null = True)
    #so so so so

class CarModel(models.Model):
    name  = models.CharField(max_length=50,blank=True,null = True)
    make = models.ForeignKey(Make,blank=True,null = True)

现在，您将如何将这样的内容传递给您的 Javascript？

class Model(ModelForm):
    make = forms.ModelChoiceField(queryset= Model.objects.none(), required=True)

    def __init__(self, somemake,*args, **kwargs):
        super(Model, self).__init__(*args, **kwargs)
        self.fields['property'].queryset = Model.objects.filter(make = somemake)

    class Meta:
        model = Model
        exclude= ('make')

<script type="text/javascript">
function populate(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if(s1.value == "Chevy"){var optionArray = ["|","camaro|Camaro","corvette|Corvette","impala|Impala"];
    } 
else if(s1.value == "Dodge"){
    var optionArray = ["|","avenger|Avenger","challenger|Challenger","charger|Charger"];
    } else if(s1.value == "Ford"){
    var optionArray = ["|","mustang|Mustang","shelby|Shelby"];
    }
    for(var option in optionArray){
    var pair = optionArray[option].split("|");
    var newOption = document.createElement("option");
    newOption.value = pair[0];
    newOption.innerHTML = pair[1];
    s2.options.add(newOption);
    }
    }
</script>

和这里的html

Choose Car Make:
    <select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
          <option value=""></option>
          <option value="Chevy">Chevy</option>
          <option value="Dodge">Dodge</option>
          <option value="Ford">Ford</option>
    </select>

   Choose Car Model:
  <select id="slct2" name="slct2"></select>
4

3 回答 3

1

你不需要 javascript 来做一些花哨的下拉菜单。你可以使用 Django Forms 来为你做这件事。您所需要的只是提供 forms.py 一些关于用户可以做出的选择的信息，并且您将呈现您的表单，而无需您做更多的事情。

查看我的forms.py以了解我是如何做到的。

于 2013-02-08T01:39:50.980 回答
1

如果你想在 JS 中做，这就是我解决问题的方法。

首先为 2 个选择列表创建一个包含以下内容的模板。

<html>
<head>
<script>
var json = {
    "Chevy": ["chev1", "chev2", "chev3"],
    "Dodge": ["dodge1", "dodge2", "dodge3"],
    "Ford": ["ford1", "ford2", "ford3"]
};

function carMake () {
    select = document.getElementById('slct1');
    select.options.length = 0;
    for(make in json) {
        select.options[select.options.length] = new Option(make, make);
    }
}

function carModel(sel) {
    var car_make = sel.options[sel.selectedIndex].value
    select = document.getElementById('slct2');
    select.options.length = 0;
    for(var i=0;i<json[car_make].length;i++) {
        select.options[select.options.length] = new Option(json[car_make][i], i);
    }
}
</script>
</head>

<body>
Choose Car Make:
<select id="slct1" onchange="carModel(this)"></select>
<script> carMake(); </script>

Choose Car Model:
<select id="slct2" name="slct2"></select>
</body>
</html>

上面的 JS 将读取 JSON 对象并在动态填充的 Car Model 选择字段发生更改时更新 Car Make。

要使用您提供的模型生成 JSON 对象，您需要执行以下操作：

在 view.py 文件中：

from <your-app>.models import Make
from <your-app>.models import Model
import json

json_dict = {}
for car_make in Make.objects.all():
    json_dict[car_make] = Model.objects.filter(make=car_make)
json_data = json.dumps(json_dict)

然后您将json_data其添加到您的响应渲染上下文中。

最后更改上面的模板，以便 JS 变量 json 将被渲染以包含从视图传递到模板的 JSON 对象。

于 2013-02-08T05:03:09.183 回答
1

您应该在使用 json.dumps 之前将查询集转换为列表，否则它会给您一个错误，即“NOT JSON SERIALIZABLE”

from <your-app>.models import Make
from <your-app>.models import Model
import json

json_dict = {}
for car_make in Make.objects.all():
    json_dict[car_make] = list(Model.objects.filter(make=car_make).value())
json_data = json.dumps(json_dict)
于 2018-10-05T13:57:59.847 回答