【发布时间】：2021-11-09 00:56:07
【问题描述】：
我需要使用 JQuery 从 ajax 调用发送一个列表，并在其中发送一个带有 Django {{ variables }} 的响应，我尝试了一切，但 JQuery 总是加载整个当前页面而不是加载 html 文件包含模板部分，它只是
<!-- city_dropdown_list_options.html -->
<option value="">----city list----</option>
{% for city in cities %}
<option value="{{ city.pk }}">{{ city.name }}</option>
{% endfor %}
这里是JQuery所在的模板
person_form.html
{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{# NOTE: templates must be defined into a folder having the same name than
the application, like here countries/person_list.html, because Django
automatically search from <template_folder_in_app_folder/app_name/template.html #}
{% block content %}
<h2>{% trans "Person Form" %}</h2>
<form method="post" novalidate>
{% csrf_token %}
<table>
{{ form.as_table }}
</table>
<button type="submit">Save</button>
<a href="{% url 'person_changelist' %}">Nevermind</a>
</form>
<div id="test"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
{# <script src="{% static 'js/test.js' %}"></script> #}
<script>
$("#id_country").change(function (){
// getting the url of the load_cities view
var url = $("#personForm").attr("data-cities-url");
// get the selected country id from the html element
var countryId = $(this).val();
$.ajax({
url: url,
data: {
// adding the countryId to GET parameters
'country': countryId
},
// data is the return value of the 'load_cities' function
success: function(data){
// replace the contents of the city input with the data
// that came from the server.
//console.log(data);
$("#id_city").html(data);
// $('#id_city').html(jQuery(data).find('#id_city').html());
}
});
});
</script>
{% endblock %}
views.py
from django.shortcuts import render
from django.views.generic import ListView, CreateView, UpdateView
from django.urls import reverse_lazy
from .models import Person, City
from .forms import PersonForm
class PersonListView(ListView):
model = Person
context_object_name = 'people'
class PersonCreateView(CreateView):
model = Person
form_class = PersonForm
success_url = reverse_lazy('person_changelist')
class PersonUpdateView(UpdateView):
model = Person
form_class = PersonForm
success_url = reverse_lazy('person_changelist')
def load_cities(request):
country_id = request.GET.get('country')
cities = City.objects.filter(country_id=country_id).order_by('name')
return render(request, 'countries/city_dropdown_list_options.html', {'cities': cities})
项目级别的 urls.py
from django.urls import path, include
from django.views.generic import RedirectView
from django.conf.urls.i18n import i18n_patterns
import debug_toolbar
from django.conf import settings
urlpatterns = i18n_patterns(
path('', RedirectView.as_view(pattern_name='person_changelist'), name='home'),
path('countries/', include('countries.urls')),
path('__debug__/', include(debug_toolbar.urls)),
prefix_default_language=False
)
应用级别的 urls.py：
from django.urls import include, path
from . import views
urlpatterns = [
path('', views.PersonListView.as_view(), name='person_changelist'),
path('add/', views.PersonCreateView.as_view(), name='person_add'),
path('<int:pk>/', views.PersonUpdateView.as_view(), name='person_change'),
path('load-cities/', views.load_cities, name='ajax_load_cities'),
path('man/load-cities/<int:pk>/', views.load_cities2, name='man_load_cities'),
]
正如我所说，我收到整个 person_form.html 作为响应，而我希望 city_dropdown_list_options.html 作为响应。请注意，响应不一定是包含的 html 部分，也可以是视图生成的简单输出。
我在 JQuery 方面不是很好，可能我做错了或遗漏了一些事情。有什么线索吗？
【问题讨论】：
-
您是否将 async 属性添加到您的 ajax 调用中？
-
我应该添加它吗？我认为它已经默认设置了。无论如何，我已经通过在下拉列表更改并且可以正常工作时在测试 div 中发送“Hello Word”来测试异步行为。我怀疑问题可能是由于 $("#id_city").html(data);或者可能在收到的响应的内容中。
标签： javascript python jquery django ajax