如何使用中间模型实现自动保存表单？

Question

我正在Django上编写应用程序。

有一个模型Article。一段时间后，有必要在某些中间模型（例如Draft）中自动保存表单中的数据。当用户单击submit时，创建一个Article并删除中间表格。据我了解，它正在JS (with ajax)上实现。但是如何做到最好？有什么例子吗？有现成的解决方案吗？还是我需要自己写信（例如，我可以在指定的时间段后发送请求）？

<script>
  //Cycle with given time intervals.
  //Form processing
  //ajax request
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/knowledge_base/add/" class="edit_form new_event" id="id_article_form" enctype="multipart/form-data" onsubmit="submitArticleForm(event, this)">
  <div class="content_create">
    <div class="field inline textarea">
      <input type="text" name="title" id="id_title" style="width: 400px;" required="" class="wide" maxlength="254">
    </div>
    <div class="field inline textarea">
      <script type="text/javascript" src="/static/ckeditor/ckeditor-init.js" data-ckeditor-basepath="/static/ckeditor/ckeditor/" id="ckeditor-init-script"></script>
      <script type="text/javascript" src="/static/ckeditor/ckeditor/ckeditor.js"></script>
        <div class="django-ckeditor-widget" data-field-id="id_text" style="display: block">
          <textarea></textarea>
        </div>
    </div>
  </div>

  <div class="footer_content">
    <div class="footer_select">
      <div class="field inline footer_inline select">
        <div class="subhead">Category:</div>
        <select name="category" id="id_category" onchange="changeArticleCategory(event, this);" class="select2 select2-hidden-accessible" required="" tabindex="-1" aria-hidden="true">
          <option value="" selected="">---------</option>
          <option value="2">Food</option>
          <option value="1">Sport</option>
        </select>
          <span class="select2 select2-container select2-container--default" dir="ltr" style="width: 82px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-id_category-container"><span class="select2-selection__rendered" id="select2-id_category-container"><span class="select2-selection__placeholder"> </span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
          <div>
            <div class="field inline select" id="id_subcategory_div">
              <div class="subhead">Subcategory:</div>
              <select name="subcategory" class="select2 select2-hidden-accessible" id="id_subcategory" tabindex="-1" aria-hidden="true"></select>
              <span class="select2 select2-container select2-container--default" dir="ltr" style="width: 44px;">
                <span class="selection">
                  <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-id_subcategory-container">
                    <span class="select2-selection__rendered" id="select2-id_subcategory-container">
                      <span class="select2-selection__placeholder"></span>
                    </span>
                    <span class="select2-selection__arrow" role="presentation">
                      <b role="presentation"></b>
                    </span>
                  </span>
                </span>
                  <span class="dropdown-wrapper" aria-hidden="true"></span>
              </span>
            </div>
            <div class="field inline footer_inline select">
              <div class="subhead">Status</div>
              <select name="status" class="select2 select2-hidden-accessible" id="id_status" tabindex="-1" aria-hidden="true">
                <option value="published">Published</option>
                <option value="not published" selected="">Not published</option>
              </select>
              <span class="select2 select2-container select2-container--default" dir="ltr" style="width: 131px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-id_status-container"><span class="select2-selection__rendered" id="select2-id_status-container" title="Not published">Not published</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
            </div>
          </div>
      </div>
    </div>
    <div class="event_photo error">
      <img id="id_image_show" src="" data-rjs="2">
      <div class="backgroundImage">
        <span class="flaticon-image"></span>
      </div>
      <div class="blind_links">
        <div class="wrapp">
          <a href="javascript:void(0)" onclick="$('#id_image').click()">
            <span class="flaticon-up-arrow-hand-drawn-outline image_upload"></span>
            <span class="image_upload">Upload</span>
            <span class="flaticon-two-circling-arrows image_edit" style="display: none;"></span>
            <span class="image_edit" style="display: none;">Edit</span>
          </a>
        </div>
      </div>
      <input type="file" name="image" style="display: none;" onchange="addArticleImage(event, this);" id="id_image">
    </div>
    <div class="center">
      <button type="submit" class="submit" id="id_submit">Submit</button>
    </div>
  </div>
</form>