requestSubmit()和submit()方法对比演示页面

展示

代码

• HTML：

  <h4>submit方法</h4>
  <form action="" method="get">
      <p><input name="name" value="张三" /></p>
      <p>
          <textarea placeholder="Ctrl+Enter提交"></textarea>
      </p>
      <input type="submit" value="提交" />
  </form>
  
  <h4>requestSubmit方法</h4>
  <form action="" method="get">
      <p><input name="name" value="李四" /></p>
      <p>
          <textarea placeholder="Ctrl+Enter提交"></textarea>
      </p>
      <input type="submit" value="提交" />
  </form>

• JS：

  document.querySelectorAll('form').forEach((form, index) => {
      form.addEventListener('submit', function (event) {
          event.preventDefault();
          // Ajax请求
          const formData = new FormData(this);
          const name = formData.get('name');
          new LightTip('提交了姓名：' + name, 'success');
      });
      // Ctrl+Enter文本域触发提交
      form.querySelector('textarea').addEventListener('keydown', function (event) {
          if (event.ctrlKey && event.key === 'Enter') {
              // 提交表单
              form[index ? 'requestSubmit' : 'submit']();
          }
      });
  });