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して、応答レンダー コンテキストに追加します。

最後に、ビューからテンプレートに渡された JSON オブジェクトを含むように JS 変数 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 に答える