提交到不同URL的表单按钮
在前端开发中，我们经常需要处理表单数据的提交。在某些情况下，我们可能需要将表单数据提交到不同的URL，而不是默认的表单处理器URL。本文将介绍如何使用JavaScript和HTML5表单API实现这一功能。
HTML5表单API
HTML5表单API为表单相关操作提供了许多有用的方法和属性。其中一个最有用的方法是submit()，它可以触发表单的提交动作。但是，如果我们需要将表单数据提交到不同的URL，该怎么办呢？答案是使用FormData对象和XMLHttpRequest（XHR）对象来构建自定义的表单提交过程。
使用FormData对象
FormData对象允许我们以键/值对的形式创建表单数据，就像一个普通的JavaScript对象。以下是一个简单的例子：
----- -------- - --- ----------- --------------------------- ----------- --------------------------- ----------
在上面的代码中，我们首先创建了一个新的FormData对象，并通过append方法添加了两个键/值对。这里的键是表单字段的名称，而值则是相应字段的值。
使用XMLHttpRequest对象
XMLHttpRequest（XHR）对象允许我们发送HTTP请求并处理响应。以下是一个简单的例子：
----- --- - --- ----------------- ---------------- -------------------- ------------------------------------ ------------------------------------- -------------------
在上面的代码中，我们首先创建了一个新的XHR对象，并使用open方法指定HTTP请求方法和URL。然后，我们设置请求头，以便服务器知道我们正在发送表单数据。最后，我们使用send方法将表单数据作为参数发送到服务器。
实现自定义表单提交
现在我们已经了解了如何使用FormData和XMLHttpRequest对象，让我们来看一个完整的示例。以下是一个HTML表单：
----- ------------- ------ -------------------------------- ------ ----------- --------------- -------------- ------ -------------------------------- ------ --------------- --------------- -------------- ------- ------------- ------------------------------------- -- ------------ ------- ------------- ------------------------------ ------------------------- -- ---------------- -------
在上面的代码中，我们创建了一个包含两个提交按钮的表单。每个按钮都有一个data-action属性，它指定了表单数据应该被提交到哪个URL。第二个按钮还有一个data-method属性，它指示使用POST请求而不是默认的GET请求。
接下来，我们需要使用JavaScript来处理表单提交事件。以下是实现自定义表单提交的JavaScript代码：
----- ---- - ----------------------------------- ------------------------------- ------- -- - ----------------------- ----- -------- - --- --------------- ----- ------ - ------------------------------ -- ------------ ----- ------ - ------------------------------ -- ------------ ----- --- - --- ----------------- ---------------- -------- ------------------------------------ ------------------------------------- ------------------- ---
在上面的代码中，我们首先获取表单元素，并使用addEventListener方法添加一个事件监听器。当表单被提交时，我们首先调用preventDefault方法，以防止默认的表单提交行为发生。
然后，我们创建一个新的FormData对象，并将表单数据作为参数传入。接下来，我们使用event.submitter.dataset属性获取当前提交按钮的自定义属性值，并使用form.action和form.method属性作为备用值。
最后，我们创建一个新的XHR对象，并使用open方法指定HTTP请求方法和URL。然后，我们设置请求头，以便服务器知道我们
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/10056