在 JavaScript 中使用 POST 请求提交表单

在 JavaScript 中,你可以使用 HTML 表单执行 POST 请求。post 是一种在 HTML 表单中用于提交或发送数据到服务器的方法。

在 JavaScript 中使用 POST 请求提交表单

下面的代码向你展示了如何使用 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 对象的键和值初始化表单字段 namevalue 参数。

因为在我们的例子中,我们传递了一个包含两个键值对的对象;因此,for 循环将执行两次。之后,我们将使用 submit() 方法执行发布请求并将用户发送到不同的端点或 URL,即 myPathsendData() 函数通过传递这些参数 sendData('/myPath/', {query: 'hello world', num: '1'}); 来调用。

如果你运行上面的代码,它会发出一个 POST 请求,然后把你带到一个新的端点,如下所示。

在 javascript 中提交表单帖子

另一种方法是在 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() 方法中,我们只是将 pathnamevalue 作为 postData("https://www.google.com/","Writer","Jim Collins") 传递;。然后我们将使用 document.getElementById() 方法访问 formField,然后如上所示适当设置值。运行此代码后,它将执行 POST 请求并将用户带到维基百科网站,如下所示。

在 javascript 中提交表单帖子 - 结果

上述代码的工作方式与前面的代码相同,但更加简洁和可读。