gpt4 book ai didi

python - 在 Django 中更新 DOM 而无需重新加载页面

转载 作者:太空狗 更新时间:2023-10-30 00:53:33 25 4
gpt4 key购买 nike

我在 DOM 中有两个选择列表,第一个填充了对 View 的初始调用(即加载页面)。第二个选择列表的内容取决于用户在第一个选择列表中选择的内容。

假设选择列表是:

  1. list_of_events
  2. list_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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com