javascript - 使用Flask和JQuery，如何在 "POST"方式中通过 "sexy"方法删除一条记录？

Question

我正在使用 Flask 制作一个小型网络应用程序。我需要在这个应用程序中实现 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 %}

flask

@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 控制台捕获此错误。我不能忍受这个。
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 response 是此类请求的标准返回值:

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 -