Денис Матвеев's questions

我正在使用 Django 4.2.16 和 Bootstrap 4.6.2

我做什么：当您单击“登录”按钮时：

<a id="login" data-url="{% url 'login' %}" data-csrf-token="{{ csrf_token }}" class="nav-link">Войти</a>

脚本：

$('#login').click(function (event) {
    event.preventDefault();

    let loginUrl = $(this).data('url');
    let csrfToken = $(this).data('csrf-token');

    $.ajax({
        url: loginUrl,
        type: 'GET',
        success: function (response) {
            $('#loginModal .modal-body').html(response);
            $('#loginModal').modal('show');

            $('#loginModal form').submit(function(event) {
                event.preventDefault();

                let formData = $(this).serialize();

                $.ajax({
                    url: loginUrl,
                    type: 'POST',
                    data: formData + '&csrfmiddlewaretoken=' + csrfToken,
                    success: function(response) {
                        if (response.indexOf('alert-danger') === -1) {
                            location.reload();
                        } else {
                            $('#loginModal .modal-body').html(response);
                        }
                    },
                    error: function() {
                        alert('Ошибка при входе в систему.');
                    }
                });
            });
        },
        error: function() {
            alert('Ошибка при загрузке формы.');
        }
    });
});

向服务器发送请求，获取登录表单的html代码，如下所示：

之后，它拦截“登录”按钮的点击，向服务器发送请求，这样如果发送了无效数据，它会立即在模态窗口中显示错误，如下所示：

之后我再次提交带有无效数据的表单。

我的期望：如果存在无限数量的无效数据条目，模式窗口将继续显示错误。

我得到的结果：整个页面转到http://127.0.0.1:8000/accounts/login/，没有样式的单个表单显示相同的错误：

请告诉我这可能与什么有关？我在devtools中检查了CSRF令牌，它没有改变。奇怪的是，第一次一切都很好，但第二次一切都崩溃了，也许这些事件有一些我没有注意到的差异？

有一张这样的桌子

<div class="table-responsive card">
    <table
    class="table table-sm align-middle"
    data-toggle="table"
    data-cookie="true"
    data-cookie-id-table="scripts"
    data-cookie-storage="localStorage"
    data-locale="ru-RU"
    data-sortable="true"
    data-search="true"
    data-pagination="true"
    data-pagination-v-align="top"
    data-page-list="[10, 20, 50, 100, all]"
    data-show-columns="true">
        <thead class="align-middle">
            <tr>
                <th data-sortable="true">Название</th>
                <th>Категория</th>
                <th>Описание</th>
            </tr>
        </thead>
        <tbody class="align-middle">
            {% for script in scripts %}
                <tr>
                    <td>
                        {{ script.name }}
                    </td>
                    <td>
                        {{ script.category }}
                    </td>
                    <td>
                        {{ script.description|default_if_none:"" }}
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

你需要给它圆角的边缘。我把它包裹起来div.card，边缘是圆角的，但是由于使用了bootstrap-table（以data-开头的属性），搜索栏、分页等也包裹在这个边框里，因为是表的一部分。如何仅将表格的边缘圆化，而不在其中包含辅助元素？