javascript - 逐步增强表格(提交)

Question

我有一个带有 <input type="submit id="no-js-submit"> 的表单.

如果启用了 Javascript，我将删除此 submit -输入字段$('#no-js-submit').remove();并添加“fire-ajax”按钮

$('<button id="fire-ajax" type="button">Fire Ajax</button>').appendTo('#tk-form'); .

因此，如果启用了 JavaScript(并且 jQuery 能够删除提交输入字段)，表单的值将通过 ajax 传输到服务器。

如果 JS 被禁用(因此 jQuery 无法删除提交输入)，表单的值将由 <input type="submit id="no-js-submit"> 提交。 .

您对此解决方案有何看法？我应该担心浏览器的(内)兼容性吗？此外，这有什么最佳实践吗？

Answer 1

更简单的方法是构建一个正常的表单，以通常的方式提交数据。如果没有 JS，这应该像广告中那样工作。

如果启用了 JS，您可以简单地“劫持”表单的提交事件，阻止其发生，并从此时开始在 JS 中执行所有操作。无需替换 DOM 元素。

$('yourFormSelector').on('submit',function(event){

  // Prevent the form from submitting normally
  event.preventDefault();

  // Turns the form into a JS Objec
  // https://stackoverflow.com/a/1186309/575527
  var formData = $(this).serializeObject();

  // Do AJAX magic here
});

要收集表单数据，this answer包含一个非常方便的方法，可以收集命名和启用的表单输入并将它们转换为 JS 对象。您可以使用此函数收集表单数据并将其提供给您的 AJAX 调用。