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

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

转载作者：太空狗更新时间：2023-10-30 00:53:33

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

假设选择列表是:

list_of_events
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/

文章推荐： python - 如何断言django在pytest中使用特定模板

太空狗

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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