使用Flask和JQuery，如何以“性感”方式通过“ POST”方法删除记录？

Question

我正在使用Flask制作一个小型Web应用程序。 我需要在此应用中实施CRUD操作。 我的主要问题是如何以正确且“性感”的方式实施“删除”操作。 我最初可以使用“ GET”方法实现“删除”操作。 但是，在阅读了一堆文档之后，我发现这肯定不是一个好方法。

因此，我尝试了一些解决方案以通过“ POST”方法实现“删除”操作，最后我使用了以下代码：

HTML

{% block mainbody %}
<div class="container">
    <div class="page-header">
        <h3>{{ _('User Setting') }}</h3>
    </div>

    <fieldset>
        <legend><label>{{ _('Article Category') }}</label></legend>
        <table class="col-md-offset-2 col-md-8">
            <tbody>
                {% for article_category in article_categories %}
                <tr>
                    <td>{{ article_category.name }}</td>
                    <td width="30px"><a href="{{ url_for('user.edit_article_category', id=article_category.id) }}"><span class="glyphicon glyphicon-pencil"></span></a></td>
                    <td width="30px"><a href="#" data-record-url="{{ url_for('user.delete_article_category', id=article_category.id) }}" data-record-title="{{ article_category.name }}" data-toggle="modal" data-target="#confirm-delete-modal"><span class="glyphicon glyphicon-trash"></span></a></td>
                </tr>
                {% endfor %}
                <tr>
                    <td><a href="{{ url_for('user.add_article_category') }}" class="btn" style="margin-top:10px"><span class="glyphicon glyphicon-plus"></span> {{ _('Create New Article Category') }}</a></td>
                </tr>
            </tbody>
        </table>
    </fieldset>
</div>

<div class="modal fade" id="confirm-delete-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">{{ _('Confirm Delete') }}</h4>
            </div>
            <div class="modal-body">
                <p>{{ _('You are about to delete this record:') }} <strong><span id="deleted-content"></span></strong>, {{ _('the procedure is irreversible') }}.</p>
                <p>{{ _('Do you want to proceed?') }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ _('Cancel') }}</button>
                <button type="button" class="btn btn-danger btn-ok">{{ _('Delete') }}</button>
            </div>
        </div>
    </div>
</div>

<script type=text/javascript src="{{ url_for('static', filename='js/jquery-3.1.1.min.js') }}"></script>
<script>
    $(document).ready(function() {
        var csrf_token = "{{ csrf_token() }}";
        $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrf_token);
                }
            }
        });
        $('#confirm-delete-modal').on('click', '.btn-ok', function(e) {
            var recordUrl = $(this).data('recordUrl');
            $.post(recordUrl, function(data) {
                console.log(data);
            });
            $('#confirm-delete-modal').modal('hide');
        });
        $('#confirm-delete-modal').on('show.bs.modal', function(e) {
            var recordTitle = $(e.relatedTarget).data('recordTitle');
            var recordUrl = $(e.relatedTarget).data('recordUrl');
            $(e.currentTarget).find('#deleted-content').text(recordTitle);
            $(e.currentTarget).find('.btn-ok').data('recordUrl', recordUrl);
        });
        $('#confirm-delete-modal').on('hidden.bs.modal', function() {
            location.reload(false);
        });
    });
</script>
{% endblock %}

烧瓶

@user.route("/setting/article-category/<int:id>/delete", methods=["POST"])
@login_required
def delete_article_category(id):
    deleting_article_category = ArticleCategory.get(ArticleCategory.id == id)
    deleting_article_category.delete_instance()
    return redirect(url_for("user.setting"))

上面的代码确实有效，但是至少有两个缺点。

1. /user/setting (url_for("user.setting"))页面内容已传输两次。 第一次是Flask代码return redirect(url_for("user.setting"))进行的操作。 第二次是JQuery代码location.reload(false)进行的操作。 似乎两个代码段是重复的。 但我无法删除其中任何一个。 如果我删除JQuery代码，则在我确认模式并确实从数据库删除了记录之后， /user/setting (url_for("user.setting"))页面无法自动刷新，这意味着删除的项目看起来仍然停留在该位置。直到我手动刷新页面。 我肯定应该避免这种不一致的结果。 如果我删除Flask代码，请return redirect(url_for("user.setting"))或将其更改为return Null ，我将收到来自服务器的500错误。 尽管实际上仍然可以删除该记录，但是我可以从Chrome的Javascript Console捕获此错误。 我不能忍受这个。
2. jQuery代码location.reload(false)将下载许多支持的东西，例如bootstrap.css，bootstrap.js，logo.png，而不是纯html文件。 甚至我都使用false参数来要求它尝试从浏览器的缓存中查找那些东西。

由于上述两个缺点，我认为我的代码效率太低。 谁可以帮助我改善代码？

通过使用console.log(data) ，我注意到Flask代码return redirect(url_for("user.setting"))已经导致JQuery的$.post()操作获取反馈数据中的新页面内容。 新页面的内容非常正确，这意味着删除的记录不再列出。 但是没有页面刷新机制可以使用此正确数据。 我认为这是导致效率低下的关键。

我认为Flask应该提供一些简单的方法来安全地删除数据库记录。 只是一个删除操作，比编辑或添加要复杂得多。 是因为我不知道如何使用Form来实现它，还是有其他原因使删除操作太难了？ 我是一个初学者，所以也许我的想法是错误的。

有什么建议吗？ 谢谢！

数据包捕获工具的更新Charles屏幕快照：

Answer 1

实际上，您不需要发送整页来返回DELETE请求。 空HTTP 204响应是此类请求的标准返回值：

def delete_article_category(id):
    deleting_article_category = ArticleCategory.get(ArticleCategory.id == id)
    deleting_article_category.delete_instance()
    return Response(status=204)

您无需担心刷新页面，因为所有静态文件都是由浏览器从其缓存中获取的。 当然，除非您使用location.reload(true) 。 检查您的应用程序的日志：很有可能它使用HTTP 304代码（未修改）提供静态文件，如下所示：

127.0.0.1 - - [16/Mar/2017 10:10:10] "GET /static/admin/bootstrap/bootstrap3/css/bootstrap.min.css?v=3.3.5 HTTP/1.1" 304 -