我在 DOM 中有两个选择列表，第一个填充了对 View 的初始调用(即加载页面)。第二个选择列表的内容取决于用户在第一个选择列表中选择的内容。
假设选择列表是:
list_of_eventslist_of_rooms
每次第一个选择列表的状态发生变化(用户选择不同的事件)时，我需要在不刷新页面的情况下更新第二个选择列表的内容(可用房间)。这可能吗？
我的模板是这样的:
{% block content %}
{% if list_of_events %}
<form>
<select>
{% for event in list_of_events %}
<option value="name">{{ event.title }}</option>
{% endfor %}
</select>
</form>
{% else %}
<p>No events available now.</p>
{% endif %}
目前，只有当用户从 list_of_events 选择列表中选择了任何内容时，第二个选择列表 list_of_rooms 才应该可见。如果用户在 list_of_events 中选择一个值，则将 first_selection 参数传递给模板。
{% if first_selection %}
<form>
<select>
{% for room in list_of_rooms %}
<option value="name">{{ room.id }}</option>
{% endfor %}
</select>
</form>
{% endif %}
<input type="submit" value="Submit">
{% endblock %}
我的 views.py 函数如下所示:
def events(request):
list_of_events = Event.objects.all()
return render(
request,
'web_service/schedule.html', {'list_of_events': list_of_events}
)
最佳答案
在Django 中，至少现在，没有直接的方法来动态调用python。方法来自 html模板而不刷新页面。
调用python方法并在不刷新页面的情况下查看它在模板中的效果你需要一点 JS , 专用 url图案和 view .它不像调用实例方法那么简单，但也不像看起来那么难。
下面的示例演示了如何响应按钮 click , 将一些数据发送到 view并将结果返回到模板而不刷新 DOM .
从模板调用 python 代码的唯一方法是与我们与 url 相关的相同方式。 ，这意味着我们必须创建新的 url pattern .然后调用必要的view并将对模板的响应返回为 JsonResponse .
注意:确保导入jquery在你的 <body> 的内部底部标签。
首先我们需要创建响应器来处理按钮点击并创建AJAX请求连接到 view 的 url . AJAX request通过 input作为我们 url 模式的参数，意味着这个参数将传递给 django view .如果我们对 view 的调用有返回结果然后在 success 中解压数据关闭。
假设我们的模板是这样的:
<input type="text" id="user-input" autofocus=""><br>
<button type="button" id="sender">Send data</button><br>
<p id="p-text">foo bar</p>
处理点击和请求的脚本如下所示:
<script>
$("#sender").click(function () {
var input = $('#user-input').val();
$.ajax({
url: '{% url 'get_response' %}',
data: {
'inputValue': input
},
dataType: 'json',
success: function (data) {
document.getElementById('p-text').innerHTML = data["response"];
}
});
});
</script>
urls.py 中需要新模式:
urlpatterns = [
...
url(r'^ajax/get_response/$', views.answer_me, name='get_response')
...
]
注意: ajax/ url 的一部分和 url 模式本身的路径对如何处理此调用没有影响。它可以是您想要的任何内容，例如:^foo/bar/$ .
最后一步是添加响应 Django view .这个简单的示例返回带有一些附加文本的输入，但通常这是您可以调用其他 Python 方法并执行任何您想做的事情的地方:
def answer_me(request):
user_input = request.GET.get('inputValue')
data = {'response': f'You typed: {user_input}'}
return JsonResponse(data)
关于python - 在 Django 中更新 DOM 而无需重新加载页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45906858/