在 JavaScript 中使用 POST 请求提交表单
在 JavaScript 中，你可以使用 HTML 表单执行 POST 请求。post 是一种在 HTML 表单中用于提交或发送数据到服务器的方法。
下面的代码向你展示了如何使用 JavaScript 在 POST 请求中提交表单。在这里，我们将创建一个新的发布请求并将用户发送到新的 URL myPath。
首先，我们创建了一个函数，它接受三个参数路径（URL 或端点）、参数（具有键值对的对象），最后一个是我们在函数执行时直接初始化的 post 方法创建。
然后使用 document.createElement() 方法，我们将创建一个表单元素并将其存储在 form 变量中。然后我们将使用 post 方法初始化这个 form.method，然后使用路径初始化 form.action。最后，我们将创建的表单附加到 DOM 中的 body 标签。
function sendData(path, parameters, method='post') {
const form = document.createElement('form');
form.method = method;
form.action = path;
document.body.appendChild(form);
for (const key in parameters) {
const formField = document.createElement('input');
formField.type = 'hidden';
formField.name = key;
formField.value = parameters[key];
form.appendChild(formField);
}
form.submit();
}
sendData('/myPath/', {query: 'hello world', num: '1'});
至此，我们已经创建了表单并将其附加到 body 元素上，目前，表单内部不包含任何元素。因此，要在表单中添加数据，我们将使用 parameters 对象，该对象将传递给我们的 sendData() 函数。为了迭代这个对象，我们将使用 for 循环并从对象中获取每个键。
然后我们将创建一个 input 表单字段并将其存储在 formField 变量中。现在我们将它的类型设置为隐藏，因为我们不想在我们的网页上显示这个表单。最后，我们将使用 parameters 对象的键和值初始化表单字段 name 和 value 参数。
因为在我们的例子中，我们传递了一个包含两个键值对的对象；因此，for 循环将执行两次。之后，我们将使用 submit() 方法执行发布请求并将用户发送到不同的端点或 URL，即 myPath。sendData() 函数通过传递这些参数 sendData('/myPath/', {query: 'hello world', num: '1'}); 来调用。
如果你运行上面的代码，它会发出一个 POST 请求，然后把你带到一个新的端点，如下所示。
另一种方法是在 HTML 本身而不是 JavaScript 中创建整个表单。然后在我们的 JavaScript 代码中访问这个表单及其元素，如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="form" action="https://www.wikipedia.org/" method="POST">
<input id="formField" type="hidden" name="Director" value="James Cameron">
</form>
<script src="./script.js"></script>
</body>
</html>
function postData(path, name, value){
document.getElementById("formField").name = name;
document.getElementById("formField").value = value;
document.getElementById("form").action = path;
document.getElementById("form").submit();
}
postData("https://www.wikipedia.org/","Writer","Jim Collins");
在这里，我们直接将 method 作为 POST 添加到 HTML 表单本身。在我们的 postData() 方法中，我们只是将 path、name 和 value 作为 postData("https://www.google.com/","Writer","Jim Collins") 传递;。然后我们将使用 document.getElementById() 方法访问 formField，然后如上所示适当设置值。运行此代码后，它将执行 POST 请求并将用户带到维基百科网站，如下所示。
上述代码的工作方式与前面的代码相同，但更加简洁和可读。
相关文章
在 Angular 中上传文件
发布时间：2023/04/14 浏览次数：71 分类：Angular
-
本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条，并在上传完成时显示文件上传完成消息。
Angular 中所有 Mat 图标的列表
发布时间：2023/04/14 浏览次数：91 分类：Angular
-
本教程演示了在哪里可以找到 Angular 中所有 Mat 图标的列表以及如何使用它们。
Angular 2 中的复选框双向数据绑定
发布时间：2023/04/14 浏览次数：139 分类：Angular
-
本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。
在 AngularJS 中重新加载页面
发布时间：2023/04/14 浏览次数：142 分类：Angular
-
我们可以借助 windows.location.reload 和 reload 方法在 AngularJS 中重新加载页面。
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间：2023/04/14 浏览次数：78 分类：Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 AngularJS 中启用 HTML5 模式
发布时间：2023/04/14 浏览次数：150 分类：Angular
-
本文讨论如何在 AngularJS 应用程序上启用带有深度链接的 HTML5 模式。
在 AngularJs 中加载 spinner
发布时间：2023/04/14 浏览次数：107 分类：Angular
-
我们将介绍如何在请求加载时添加加载 spinner，并在 AngularJs 中加载数据时停止加载器。
在 Angular 中显示和隐藏
发布时间：2023/04/14 浏览次数：78 分类：Angular
-
本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时，我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。
在 Angular 中下载文件
发布时间：2023/04/14 浏览次数：104 分类：Angular
-
本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。
