表格上的渐进式增强(提交)

Question

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

如果启用了 Javascript，我将通过$('#no-js-submit').remove();删除此submit输入字段，并添加带有

$('<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
});

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