javascript - 传统方式提交表单，防止重复提交问题？

Question

提交表单的时候，不是使用ajax提交，就是传统的表单提交，为防止表单重复提交，应该怎么写javascript或jquery代码呢？如果提交没成功，怎么恢复提交按钮？

html如下：

<form>
  <fieldset class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    <small class="text-muted">We'll never share your email with anyone else.</small>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleSelect1">Example select</label>
    <select class="form-control" id="exampleSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleTextarea">Example textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" class="form-control-file" id="exampleInputFile">
    <small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
  </fieldset>
  <p class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
      Option one is this and that&mdash;be sure to include why it's great
    </label>
  </p>
  <p class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
      Option two can be something else and selecting it will deselect option one
    </label>
  </p>
  <p class="radio disabled">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
      Option three is disabled
    </label>
  </p>
  <p class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </p>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Answer 1

访问页面返回token，提交表单带上token。验证token是否有效。

Answer 2

给按钮添加点击事件, 点击后, 给按钮添加disabled属性

$(":submit").on("click", function(){
    // 如果需要判断表单是否通过, 写这
    // if (通过)
     $(this).prop("disabled", true);
})

Answer 3

js 加断组织默认事件的代码

Answer 4

可以加一个缓存层。然后提交成功了。则就创建一个针对用户的数据hash或者字符串等等的。反正你可以想着办法的存，然后下次提交的时候，先进行对比，如果相同，则提示已经提交过了。如果不存在，则可以继续进行提交，但是隔着提交这个办法救不灵了。
用JS不保险。我个人觉得。

Answer 5

token是个不错的方式！