如何使用 JavaScript 动态提交 POST 请求？

创建动态表单并提交 POST 请求

在 JavaScript 中，我们经常需要使用 POST 请求将数据发送到服务器。但是，如果资源需要表单提交才能得到正确的响应，我们需要一种动态模拟表单提交的方法。

使用 XMLHttpRequest

XMLHttpRequest 是用于异步 HTTP 请求。但是，它对于提交表单来说并不理想，因为它不是为原生处理表单数据而设计的。

动态创建输入元素

跨浏览器解决方案涉及动态创建输入元素并将它们附加到表格中。然后我们可以通过编程方式提交此表单。

/**
 * sends a request to the specified url from a form. this will change the window location.
 * @param {string} path the path to send the post request to
 * @param {object} params the parameters to add to the url
 * @param {string} [method=post] the method to use on the form
 */
function post(path, params, method='post') {
  const form = document.createElement('form');
  form.method = method;
  form.action = path;

  for (const key in params) {
    if (params.hasOwnProperty(key)) {
      const hiddenField = document.createElement('input');
      hiddenField.type = 'hidden';
      hiddenField.name = key;
      hiddenField.value = params[key];

      form.appendChild(hiddenField);
    }
  }

  document.body.appendChild(form);
  form.submit();
}

用法

您可以使用此函数通过动态创建和提交表单来发送 POST 请求：

post('/contact/', {name: 'Johnny Bravo'});

以上是如何使用 JavaScript 动态提交 POST 请求？的详细内容。更多信息请关注PHP中文网其他相关文章！