FlaskとJQueryを使って、 "セクシー"な方法で "POST"メソッドでレコードを削除するには？

Question

私はFlaskを使って小さなWebアプリケーションを作っています。私はこのアプリケーションでCRUD操作を実装する必要があります。私の主な問題は、「削除」操作を適切かつセクシーな方法で実装する方法です。元々は "GET"メソッドで "Delete"操作を実装できます。しかし、文書の束を読んだ後、私はこれが確かに良い方法ではないことを発見しました。

だから私は "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")) 

上記のコードは機能しますが、少なくとも2つの欠点があります。

1. /user/setting (url_for("user.setting"))ページコンテンツが2回転送されます。フラスココードreturn redirect(url_for("user.setting"))は初めてのものです。 2回目は、JQueryのコードlocation.reload(false)が作成するものです。 2つのコードセグメントが繰り返されているようです。しかし、私はそれらのいずれかを削除することはできません。私がJQueryコードを削除した場合は、/user/setting (url_for("user.setting"))ページはモーダルを確認してから実際にDBからレコードを削除した後、自動リフレッシュできません。つまり、手動でページをリフレッシュするまで、削除されたアイテムがそこに残っているように見えます。これは確かに私が避けなければならない矛盾した結果です。 Flaskコードreturn redirect(url_for("user.setting"))を削除するか、return Nullに変更すると、サーバーから500エラーが届きます。実際にはレコードを削除することはできますが、ChromeのJavascriptコンソールからこのエラーを検出できます。私はこれに苦しむことはできません。
2. JQueryコードlocation.reload(false)は、純粋なhtmlファイルではなく、bootstrap.css、bootstrap.js、logo.pngのような多くのサポート対象をダウンロードします。でも私はfalseパラメータを使ってブラウザのキャッシュからそれらのものを見つけようとしました。

上記の2つの欠点のため、私のコードの効率は低すぎると思います。誰が私のコードを改善するのに役立つでしょうか？

console.log(data)を使用すると、フラスココードreturn redirect(url_for("user.setting"))が既にJQueryの$.post()オペレーションでフィードバックデータの新しいページコンテンツを取得していることに気付きました。新しいページの内容はかなり正しいです。つまり、削除されたレコードはそれ以上リストにはありません。しかし、この正しいデータを使用できるページ更新メカニズムはありません。私はこれが低い効率を導く鍵だと思います。

私は、FlaskがDBレコードを安全に削除する簡単な方法を提供するべきだと考えています。ちょうど削除操作です。編集や追加よりはるかに複雑です。 Formを使用して実装する方法がわからないか、削除操作を非常に難しくする理由がありますか？私は初心者なので多分私の考えは間違っています。

私にいくつかのアドバイスはありますか？ありがとう！パケットキャプチャツールの

アップデート - Charlesスクリーンショット：

Answer 1

実際にあなたが要求を削除するには、見返りに全ページを送信する必要はありません。あなたはすべての静的ファイルがキャッシュからブラウザによって得ているとしてさわやかなページを心配する必要はありません

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

：空HTTP 204応答は、そのような要求のための標準的な戻り値です。もちろん、location.reload(true)を使用しない限り。アプリケーションのログを確認してください：機能の完全な意味はなく、余分なコードやデータなし

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 -