javascript - Jquery ajax 调用在 django 应用程序中无法用于依赖下拉

Question

我正在尝试使用 jquery ajax 调用在我的 django 应用程序中获取基于城市的位置，但这似乎不起作用。这里到底出了什么问题？帮助

html

<h1>Dependent Dropdown</h1>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $("#selectcities").change(function () { 
        const city_id = $(this).val();  

        $.ajax({                       
            url: '/getdetails',   
            data: {
                'city_id': city_id       
            },
            success: function (data) { 
                console.log(data)
                $("#selectlocalities").html(data); 
               
            }
        });

    });
</script>
<form action="/submit/" method="POST">
    <h4>Select city</h4>
    <select id="selectcities" name="selectcity">
        <option selected>Select City</option>
        {% for city in cities %}
        <option val="{{ city.id }}">{{city.name}}</option>
        {% endfor %}
    </select>
    <h4>Select Locality</h4>
        <select id="selectlocalities" name="selectlocality">
            <option selected>Select Locality</option>
        </select>
    <input type="submit" class="btn btn-dark btn-lg">
</form>

视图.py

def pageload(request):
    cities=city.objects.all()
    context={'cities': cities}
    return render(request,'index.html',context)

def load_localities(request):
    city_id = request.GET.get('city_id')
    localities = locality.objects.filter(city_id=city_id).all()
    context={'localities':localities}
    return render(request, 'locality_dropdown_list_options.html',context)

标签： javascriptjquerydjangoajax