Javascript Django中使用AJAX的依赖表单

在我的项目中，我试图从中添加一个依赖表单解决方案。我的模板似乎正确地接受了所有数据，但它没有显示在“城市”字段中

型号

class Country(models.Model):
    name = models.CharField(max_length=50)
    def __unicode__(self):
        return u'%s' % (self.name)


class City(models.Model):
    name = models.CharField(max_length=50)
    country = models.ForeignKey(Country, on_delete=models.CASCADE)
    def __unicode__(self):
        return u'%s' % (self.name)

path('getdetails/', views.getdetails, name='getdetails'),
path('new-post/', views.new_post, name='new_post'),

from django.shortcuts import render
from django.http import JsonResponse
from django.http import HttpResponse

def new_post(request):
    countries = Country.objects.all()
    [...]

def getdetails(request):
    #country_name = request.POST['country_name']
    country_name = request.GET['cnt']

    result_set = []
    all_cities = []
    answer = str(country_name[1:-1])
    selected_country = Country.objects.get(name=answer)
    print("selected country name ", selected_country)
    all_cities = selected_country.city_set.all()
    print(all_cities)
    for city in all_cities:
        print("city name", city.name)
        result_set.append({'name': city.name})
    return HttpResponse(JsonResponse({'result_set': result_set}))

URL

class Country(models.Model):
    name = models.CharField(max_length=50)
    def __unicode__(self):
        return u'%s' % (self.name)


class City(models.Model):
    name = models.CharField(max_length=50)
    country = models.ForeignKey(Country, on_delete=models.CASCADE)
    def __unicode__(self):
        return u'%s' % (self.name)

path('getdetails/', views.getdetails, name='getdetails'),
path('new-post/', views.new_post, name='new_post'),

from django.shortcuts import render
from django.http import JsonResponse
from django.http import HttpResponse

def new_post(request):
    countries = Country.objects.all()
    [...]

def getdetails(request):
    #country_name = request.POST['country_name']
    country_name = request.GET['cnt']

    result_set = []
    all_cities = []
    answer = str(country_name[1:-1])
    selected_country = Country.objects.get(name=answer)
    print("selected country name ", selected_country)
    all_cities = selected_country.city_set.all()
    print(all_cities)
    for city in all_cities:
        print("city name", city.name)
        result_set.append({'name': city.name})
    return HttpResponse(JsonResponse({'result_set': result_set}))

视图

class Country(models.Model):
    name = models.CharField(max_length=50)
    def __unicode__(self):
        return u'%s' % (self.name)


class City(models.Model):
    name = models.CharField(max_length=50)
    country = models.ForeignKey(Country, on_delete=models.CASCADE)
    def __unicode__(self):
        return u'%s' % (self.name)

path('getdetails/', views.getdetails, name='getdetails'),
path('new-post/', views.new_post, name='new_post'),

from django.shortcuts import render
from django.http import JsonResponse
from django.http import HttpResponse

def new_post(request):
    countries = Country.objects.all()
    [...]

def getdetails(request):
    #country_name = request.POST['country_name']
    country_name = request.GET['cnt']

    result_set = []
    all_cities = []
    answer = str(country_name[1:-1])
    selected_country = Country.objects.get(name=answer)
    print("selected country name ", selected_country)
    all_cities = selected_country.city_set.all()
    print(all_cities)
    for city in all_cities:
        print("city name", city.name)
        result_set.append({'name': city.name})
    return HttpResponse(JsonResponse({'result_set': result_set}))

模板

  <select name="selectcountries" id="selectcountries">
    {% for item in countries %}
    <option val="{{ item.name }}"> {{ item.name }} </option>
    {% endfor %}
  </select>

  <select name="selectcities" id="selectcities">
  </select>
  
  <!-- and jquery -->
  <script type="text/javascript" src="http://yourjavascript.com/7174319415/script.js"></script>
  <script>
    $(document).ready(function() {
      $('select#selectcountries').change(function() {
        var optionSelected = $(this).find("option:selected");
        var valueSelected = optionSelected.val();
        var country_name = optionSelected.text();


        data = {
          'cnt': country_name
        };
        ajax('/getdetails', data, function(result) {

          console.log(result);
          $("#selectcities option").remove();
          for (var i = result.length - 1; i >= 0; i--) {
            $("#selectcities").append('<option>' + result[i].name + '</option>');
          };


        });
      });
    });
  </script>

{国家/地区%中的项目为%}
{{item.name}
{%endfor%}
$（文档）.ready（函数（）{
$（'select#selectcountries'）。更改（函数（）{
var optionSelected=$（this）.find（“option:selected”）；
var valueSelected=optionSelected.val（）；
var country_name=options selected.text（）；
数据={
“cnt”：国家/地区名称
};
ajax（'/getdetails'，数据，函数（结果）{
控制台日志（结果）；
$（“#选择城市选项”）.remove（）；
对于（var i=result.length-1；i>=0；i--）{
$（“#selectcities”）.append（“”+result[i].name+“”）；
};
});
});
});

如您所见，我的模板接收AJAX响应，但与表单不匹配，并且所有城市始终未定义。如何修复错误以显示正确的城市？

---

（视频）

调用

ajax

返回响应。您还需要访问

结果集

    ajax('/getdetails', data, function(response) {
      console.log(response);
      $("#selectcities option").remove();
      for (var i = response.result_set.length - 1; i >= 0; i--) {
        $("#selectcities").append('<option>' + response.result_set[i].name + '</option>');
      };

    });

ajax（'/getdetails'，数据，函数（响应）{
控制台日志（响应）；
$（“#选择城市选项”）.remove（）；
对于（var i=response.result\u set.length-1；i>=0；i--）{
$（“#selectcities”）.append（“”+response.result_set[i].name+“”）；
};
});