如何只允许我的代码的特定部分在 Django 中重新加载

Question

所以，我正在使用 Django 应用程序，而我也在使用谷歌地图 API。 所以这是实例......当我提交表单时......我只希望我的表单 div 重新加载，而不是我的地图所在的 div。

所以我的代码是...

        <section class="middleSection p-2">
            <div class="HideOpenMiddleCont justify-content-center" onclick="HideOpenMiddleCont()">
                <div class="px-4 rounded-pill bg-warning" id="arrowCont">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-arrow-down-short text-dark" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z"/>
                    </svg>
                </div>
            </div>

            {% if view == 'trip' %}
                {% include "app/passenger/trip.html" %}
            {% elif view == "upcomingRides" %}
                {% include "app/passenger/upcomingRides.html" %}
            {% elif view == "pastRides" %}
                {% include "app/passenger/pastRides.html" %}
            {% endif %}

            <div class="optionBarPull" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
                    <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
                </svg>
            </div>

        </section>


    <section class="rightSection" id="map">
        <h3 class="font3 text-center p-2"><strong>Google Maps is here</strong></h3>
        <h4 class="font3 text-center text-danger" id="googleMapsText"></h4>
        <h5 class="font3 text-center text-muted">Please try refreshing the page if the maps doesnt display.</h5>
    </section>

我的表单在<section class="middleSection p-2"> 中，我想在提交后重新加载，但我想保持<section class="rightSection" id="map"> 原样。

我该如何处理这种情况，因为当我提交表单时，我的所有标记和圆圈都会被删除，这很烦人......

任何帮助将不胜感激！

Answer 1

您可以在要更新网页的部分内容时使用 AJAX，而无需重新加载整个页面。我主要使用 AJAX-Jquery。代码看起来就像这样。

<script>
    $('#btn').click(function () {
    var data = {
        'csrfmiddlewaretoken': '{{csrf_token}}',
        '---': ---,
        '---': ---,
    }
    
        $.ajax({
            url: '/',
            method: 'POST',
            data: data,
            dataType: 'json',
            success: function (data) {
                
            }
        })
    }
})</script>

如果您不熟悉此代码。

• 首先，获取所有要发送的数据，并将其作为键值对包含在数据中
• 给出 URL、方法、数据和数据类型

您可以使用 request.POST 访问您发送到后端的每个数据，在该方法中使用 return Jsonresponse。响应将在 ajax 中返回成功函数，您可以编写 js 代码来清除表单。

确保您在 ajax 脚本之上添加了 ajax 和 jquery 的 cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

我希望这会有所帮助。