首页 >web前端 >js教程 >如何在 JavaScript 中模拟 POST 请求(如表单提交)?

如何在 JavaScript 中模拟 POST 请求(如表单提交)?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-12-18 15:29:11238浏览

How Can I Simulate a POST Request in JavaScript Like a Form Submission?

JavaScript 中的 POST 请求,类似于表单提交

寻求将浏览器重定向到不同的页面,可以使用 GET 请求,如下面的示例:

document.location.href = 'http://example.com/q=a';

但是,对于需要 POST 请求的资源,不同的方法是 必要的。静态提交可以使用 HTML,如图:

<form action="http://example.com/" method="POST">
    <input type="hidden" name="q" value="a">
</form>

动态提交则首选 JavaScript 方案:

post_to_url('http://example.com/', {'q':'a'});

跨浏览器兼容性需要全面的支持执行。下面的代码提供了一个简单的解决方案:

/**
 * 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') {

  // The rest of this code assumes you are not using a library.
  // It can be made less verbose if you use one.
  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('/contact/', {name: 'Johnny Bravo'});

此方法确保浏览器位置发生变化,模拟表单提交。请注意,已添加 hasOwnProperty 检查以防止无意的错误。

以上是如何在 JavaScript 中模拟 POST 请求(如表单提交)?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn