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">提交。

您对此解决方案有何看法？是否有任何浏览器（in-）兼容性我应该担心？此外，有什么最好的做法吗？

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调用。

表格上的渐进式增强（提交）

1 个答案: