javascript - JavaScript发布请求，如表单提交(JavaScript post request like a form submit)

Question

I'm trying to direct a browser to a different page.

(我正在尝试将浏览器定向到其他页面。)

If I wanted a GET request, I might say

(如果我想要一个GET请求，我可能会说)

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

But the resource I'm trying to access won't respond properly unless I use a POST request.

(但是我试图访问的资源不会正常响应，除非我使用POST请求。)

If this were not dynamically generated, I might use the HTML

(如果这不是动态生成的，我可能会使用HTML)

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

Then I would just submit the form from the DOM.

(然后我只需从DOM提交表单。)

But really I would like JavaScript code that allows me to say

(但实际上我想要允许我说的JavaScript代码)

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

What's the best cross browser implementation?

(什么是最好的跨浏览器实现？)

Edit

(编辑)

I'm sorry I was not clear.

(对不起，我不清楚。)

I need a solution that changes the location of the browser, just like submitting a form.

(我需要一个改变浏览器位置的解决方案，就像提交表单一样。)

If this is possible with XMLHttpRequest , it is not obvious.

(如果使用XMLHttpRequest可以实现这一点，那就不明显了。)

And this should not be asynchronous, nor use XML, so Ajax is not the answer.

(这不应该是异步的，也不应该使用XML，所以Ajax不是答案。)

  ask by Joseph Holsten translate from so

Answer 1

Dynamically create <input> s in a form and submit it(在表单中动态创建<input>并提交它)

/**
 * 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 paramiters 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 wordy 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();
}

Example:

(例：)

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

EDIT : Since this has gotten upvoted so much, I'm guessing people will be copy-pasting this a lot.

(编辑 ：由于这已经投入了很多，我猜测人们将会复制粘贴这么多。)

So I added the hasOwnProperty check to fix any inadvertent bugs.

(所以我添加了hasOwnProperty检查以修复任何无意的错误。)