JavaScript Post-Anfrage wie ein Formular abschicken

Question

Ich versuche, einen Browser auf eine andere Seite zu leiten. Wenn ich eine GET-Anfrage wollte, könnte ich sagen

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

Aber die Ressource, auf die ich zugreifen möchte, antwortet nicht richtig, es sei denn, ich verwende eine POST-Anforderung. Wenn dies nicht dynamisch generiert würde, könnte ich die HTML

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

Dann würde ich das Formular einfach aus dem DOM übermitteln.

Aber eigentlich möchte ich JavaScript-Code, der es mir erlaubt, zu sagen

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

Was ist die beste browserübergreifende Implementierung?

Modifier

Es tut mir leid, dass ich mich nicht klar ausgedrückt habe. Ich brauche eine Lösung, die den Standort des Browsers ändert, genau wie beim Absenden eines Formulars. Wenn dies möglich ist mit XMLHttpRequest ist es nicht offensichtlich. Und dies sollte nicht asynchron sein, noch XML verwenden, so Ajax ist nicht die Antwort.

Answer 1

Dynamisch erstellen <input> s in ein Formular eintragen und abschicken

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

Beispiel:

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

EDIT : Da dies so oft hochgevotet wurde, nehme ich an, dass die Leute dies oft kopieren werden. Also habe ich die hasOwnProperty prüfen, um versehentliche Fehler zu beheben.

Answer 2

Dies wäre eine Version der ausgewählten Antwort mit jQuery .

// Post to the provided URL with the specified parameters.
function post(path, parameters) {
    var form = $('<form></form>');

    form.attr("method", "post");
    form.attr("action", path);

    $.each(parameters, function(key, value) {
        var field = $('<input></input>');

        field.attr("type", "hidden");
        field.attr("name", key);
        field.attr("value", value);

        form.append(field);
    });

    // The form needs to be a part of the document in
    // order for us to be able to submit it.
    $(document.body).append(form);
    form.submit();
}

Answer 3

Eine einfache Quick-and-Dirty-Implementierung der Antwort von @Aaron:

document.body.innerHTML += '<form id="dynForm" action="http://example.com/" method="post"><input type="hidden" name="q" value="a"></form>';
document.getElementById("dynForm").submit();

Natürlich sollten Sie lieber ein JavaScript-Framework wie Prototyp o jQuery ...

Answer 4

Die Verwendung des createElement Funktion, die in diese Antwort was notwendig ist aufgrund von IE's Unzulänglichkeiten beim Namensattribut bei Elementen, die normalerweise mit document.createElement :

function postToURL(url, values) {
    values = values || {};

    var form = createElement("form", {action: url,
                                      method: "POST",
                                      style: "display: none"});
    for (var property in values) {
        if (values.hasOwnProperty(property)) {
            var value = values[property];
            if (value instanceof Array) {
                for (var i = 0, l = value.length; i < l; i++) {
                    form.appendChild(createElement("input", {type: "hidden",
                                                             name: property,
                                                             value: value[i]}));
                }
            }
            else {
                form.appendChild(createElement("input", {type: "hidden",
                                                         name: property,
                                                         value: value}));
            }
        }
    }
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

Answer 5

Rakesh Pai's Antwort ist erstaunlich, aber es gibt ein Problem, das bei mir auftritt (in Safari ), wenn ich versuche, ein Formular mit einem Feld namens submit . Zum Beispiel, post_to_url("http://google.com/",{ submit: "submit" } ); . Ich habe die Funktion leicht geändert, um diese variable Raumkollision zu umgehen.

    function post_to_url(path, params, method) {
        method = method || "post";

        var form = document.createElement("form");

        //Move the submit function to another variable
        //so that it doesn't get overwritten.
        form._submit_function_ = form.submit;

        form.setAttribute("method", method);
        form.setAttribute("action", path);

        for(var key in params) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
        }

        document.body.appendChild(form);
        form._submit_function_(); //Call the renamed function.
    }
    post_to_url("http://google.com/", { submit: "submit" } ); //Works!