2

2 つの住所を取得し、Google マップを使用して距離を計算し、車両の mpg 評価に基づいてガソリン代を計算するこの小さな Web アプリを作成しています。AJAX で最もうまく機能すると思われるこの最後の部分を除いて、すべてが完了しています。

3 つのリスト (年式、メーカー、モデル) があり、車のモデルのリストを年式と車のメーカーに基づいて制限する必要があります。選択後、クリックすると、データベース内の有効な車両であるかどうかを確認し、車両の mpg 評価を取得して基本的な計算を行うボタンがあります。

問題は、この問題にアプローチする方法が本当にわからないことです。過去数時間、いくつかの問い合わせを検索しましたが、モデル フォームと Django の選択フィールドに関連する多くの情報を得ています。私の考えは、innerText/value を変更して、django データベースと照合することです。

SOからのこの回答にも出くわしました：

Ajax を Django アプリケーションと統合するにはどうすればよいですか?

それに少し混乱しています。私が正しく理解していれば、AJAX GET リクエストは、ユーザーとしてその URL にアクセスした場合と同じように、JavaScript オブジェクトのデータを抽出します。これは、別の HTML テンプレートを作成し、データベース内のすべての車両をそのページに投稿して、そこから情報を抽出して動的リストを作成できるということですか?

ajax を使用してリストを動的に生成し、年、メーカー、およびモデルをデータベースで検証して、車の mpg を返す最も簡単な方法を探しています。

models.py:

class Car(models.Model):
    year = models.IntegerField(default=0)
    make = models.CharField(max_length=60)
    model = models.CharField(max_length=60)
    mpg = models.IntegerField(default=0)


    def __str__(self):
        return ("{0} {1} {2}".format(self.year, self.make, self.model))

views.py: (現在、すべての車両をリストするだけで、その場で車両を確認する方法はありません)

def index(request):

    context_dic = {}
    car_list = Car.objects.order_by('make')
    car_list_model = Car.objects.order_by('model')
    context_dic['car_list'] = car_list
    context_dic['years'] = []
    context_dic['makes'] = []
    context_dic['models'] = []

    for year in range(1995, 2016):
        context_dic['years'].append(year)

    for make in car_list:
        if make.make not in context_dic['makes']:
            context_dic['makes'].append(make.make)
        else:
            continue

    for model in car_list_model:
        if model.model not in context_dic['models']:
            context_dic['models'].append(model.model)
        else:
            continue

    return render(request, 'ConverterApp/index.html', context_dic)

html: (メーカーとモデルの場合は x3)

<div id="specifics">
    <div class="dropdown" id="year-dropdown">
      <button class="btn btn-default dropdown-toggle" type="button"
      id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Year
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    {% for year in years %}
      <li><a href="#">{{ year }}</a></li>
    {% endfor %}
  </ul>
</div>

javascript: (現在は値を表示するだけですが、データベースで確認できません)

  $('#calculate').on('click', function ()
  {
    $(this).siblings()[0].textContent = (
      document.getElementById("dropdownMenu1").textContent
      + " " + document.getElementById("dropdownMenu2").textContent
       + " " + document.getElementById("dropdownMenu3").textContent
       + " " + document.getElementById("specifics-gas").value
    )
  });
});

  //this part changes the year, make, model to what the user selects //from the list
  $('li').on('click', function () {
    $(this).parent().siblings()[0].innerHTML = this.innerHTML
    //console.log(this.textContent)
  });
4

3 に答える 3