JavaScript requête post comme la soumission d'un formulaire

Ce serait une version de la réponse sélectionnée à l'aide de 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();
}

À l'aide de la createElement fonction fournie dans cette réponse, ce qui est nécessaire en raison de IE brisé avec le nom de l'attribut sur les éléments créés normalement avec 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);
}

Pas. Vous ne pouvez pas avoir le JavaScript requête post comme la soumission d'un formulaire.

Ce que vous pouvez avoir est un formulaire en HTML, puis de le soumettre avec le JavaScript. (comme il est expliqué à de nombreuses reprises sur cette page).

Vous pouvez créer le code HTML vous-même, vous n'avez pas besoin de JavaScript pour écrire le HTML. Ce serait ridicule si les gens ont suggéré que.

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

Votre fonction, il suffit de configurer le formulaire de la façon dont vous le souhaitez.

function postToURL(a,b,c){
   document.getElementById("ninja").action     = a;
   document.getElementById("donaldduck").name  = b;
   document.getElementById("donaldduck").value = c;
   document.getElementById("ninja").submit();
}

Puis, l'utiliser comme.

postToURL("http://example.com/","q","a");

Mais je voudrais juste quitter la fonction et juste le faire.

document.getElementById('donaldduck').value = "a";
document.getElementById("ninja").submit();

Enfin, le style de décision va dans le ccs fichier.

#ninja{ 
  display:none;
}

Personnellement, je pense que les formulaires doivent être adressés par leur nom, mais ce n'est pas important maintenant.

c'est la réponse de rakesh, mais avec un support pour les tableaux (ce qui est assez fréquent dans les formes):

plaine javascript:

function post_to_url(path, params, method) {
    method = method || "post"; //Set method to post by default, if not specified.

    //The rest of this code assumes you are not using a library.
    //It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    var addField = function( key, value ){
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", key);
        hiddenField.setAttribute("value", value );

        form.appendChild(hiddenField);
    }; 

    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            if( params[key] instanceof Array ){
                for(var i = 0; i < params[key].length; i++){
                    addField( key, params[key][i] )
                }
            }
            else{
                addField( key, params[key] ); 
            }
        }
    }

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

oh, et voici la version jquery: (code légèrement différent, mais se résume à la même chose)

function post_to_url(path, params, method) {
    method = method || "post"; //Set method to post by default, if not specified.

    var form = $(document.createElement( "form" ))
        .attr( {"method": method, "action": path} );

    $.each( params, function(key,value){
        $.each( value instanceof Array? value : [value], function(i,val){
            $(document.createElement("input"))
                .attr({ "type": "hidden", "name": key, "value": val })
                .appendTo( form );
        }); 
    } ); 

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

Bien, j'avais lu tous les autres postes, donc je ne perds pas de temps à créer cette de Rakesh Pai de réponse. Voici une solution récursive qui fonctionne avec les tableaux et les objets. Pas de dépendance à jQuery.

Ajouté un segment de gérer les cas où le formulaire doit être présenté comme un tableau. (ie. où il n'y a aucun objet wrapper autour d'une liste d'éléments)

/**
* Posts javascript data to a url using form.submit().  
* Note: Handles json and arrays.
* @param {string} path - url where the data should be sent.
* @param {string} data - data as javascript object (JSON).
* @param {object} options -- optional attributes
*  { 
*    {string} method: get/post/put/etc,
*    {string} arrayName: name to post arraylike data.  Only necessary when root data object is an array.
*  }
* @example postToUrl('/UpdateUser', {Order {Id: 1, FirstName: 'Sally'}});
*/
function postToUrl(path, data, options) {
if (options === undefined) {
options = {};
}
var method = options.method || "post"; //Set method to post by default if not specified.
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
function constructElements(item, parentString) {
for (var key in item) {
if (item.hasOwnProperty(key) && item[key] != null) {
if (Object.prototype.toString.call(item[key]) === '[object Array]') {
for (var i = 0; i < item[key].length; i++) {
constructElements(item[key][i], parentString + key + "[" + i + "].");
}
} else if (Object.prototype.toString.call(item[key]) === '[object Object]') {
constructElements(item[key], parentString + key + ".");
} else {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", parentString + key);
hiddenField.setAttribute("value", item[key]);
form.appendChild(hiddenField);
}
}
}
}
//if the parent 'data' object is an array we need to treat it a little differently
if (Object.prototype.toString.call(data) === '[object Array]') {
if (options.arrayName === undefined) console.warn("Posting array-type to url will doubtfully work without an arrayName defined in options.");
//loop through each array item at the parent level
for (var i = 0; i < data.length; i++) {
constructElements(data[i], (options.arrayName || "") + "[" + i + "].");
}
} else {
//otherwise treat it normally
constructElements(data, "");
}
document.body.appendChild(form);
form.submit();
};

J'aimerais aller en bas de l'Ajax route que d'autres ont suggéré avec quelque chose comme:

var xmlHttpReq = false;
var self = this;
//Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
//IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open("POST", "YourPageHere.asp", true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
self.xmlHttpReq.setRequestHeader("Content-length", QueryString.length);
self.xmlHttpReq.send("?YourQueryString=Value");

La façon la plus simple est l'utilisation d'Ajax Requête Post:

$.ajax({
type: "POST",
url: 'http://www.myrestserver.com/api',
data: data,
success: success,
dataType: dataType
});

où:

• de données est un objet
• type de données est prévue par le serveur (xml,
  json, script, texte, html)
• url est l'adresse de votre Repos, de serveur ou de toute fonction sur le côté serveur qui accepte les HTTP-POST.

Ensuite dans le gestionnaire de succès rediriger le navigateur avec quelque chose comme de la fenêtre.emplacement.

Cela fonctionne parfaitement dans mon cas:

document.getElementById("form1").submit();

Vous pouvez l'utiliser dans la fonction comme:

function formSubmit() {
document.getElementById("frmUserList").submit();
} 

À l'aide de ce que vous pouvez poster toutes les valeurs des entrées.

Encore un autre récursive solution, car certains d'autres semblent être cassé (je n'ai pas tous les tester). Celui-ci dépend lodash 3.x et ES6 (jQuery non obligatoire):

function createHiddenInput(name, value) {
let input = document.createElement('input');
input.setAttribute('type','hidden');
input.setAttribute('name',name);
input.setAttribute('value',value);
return input;
}
function appendInput(form, name, value) {
if(_.isArray(value)) {
_.each(value, (v,i) => {
appendInput(form, `${name}[${i}]`, v);
});
} else if(_.isObject(value)) {
_.forOwn(value, (v,p) => {
appendInput(form, `${name}[${p}]`, v);
});
} else {
form.appendChild(createHiddenInput(name, value));
}
}
function postToUrl(url, data) {
let form = document.createElement('form');
form.setAttribute('method', 'post');
form.setAttribute('action', url);
_.forOwn(data, (value, name) => {
appendInput(form, name, value);
});
form.submit();
}

C'est comme Alan option 2 (ci-dessus). Comment instancier le httpobj est laissée en exercice.

httpobj.open("POST", url, true);
httpobj.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
httpobj.onreadystatechange=handler;
httpobj.send(post);

Vous pourriez ajouter dynamiquement le formulaire à l'aide du visualiseur DHTML et puis soumettez-la.

- Je utiliser le document.les formes java et fait une boucle pour obtenir tous les éléments du formulaire, puis de les envoyer via xhttp. Donc, c'est ma solution pour javascript /ajax soumettre (avec tout le code html inclus à titre d'exemple):

          <!DOCTYPE html>
<html>
<body>
<form>
First name: <input type="text" name="fname" value="Donald"><br>
Last name: <input type="text" name="lname" value="Duck"><br>
Addr1: <input type="text" name="add" value="123 Pond Dr"><br>
City: <input type="text" name="city" value="Duckopolis"><br>
</form> 
<button onclick="smc()">Submit</button>
<script>
function smc() {
var http = new XMLHttpRequest();
var url = "yourphpfile.php";
var x = document.forms[0];
var xstr = "";
var ta ="";
var tb ="";
var i;
for (i = 0; i < x.length; i++) {
if (i==0){ta = x.elements[i].name+"="+ x.elements[i].value;}else{
tb = tb+"&"+ x.elements[i].name +"=" + x.elements[i].value;
} }
xstr = ta+tb;
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
//do whatever you want to with the html output response here
} 
}
http.send(xstr);
}
</script>
</body>
</html>

Voici comment je le fais.

function redirectWithPost(url, data){
var form = document.createElement('form');
form.method = 'POST';
form.action = url;
for(var key in data){
var input = document.createElement('input');
input.name = key;
input.value = data[key];
input.type = 'hidden';
form.appendChild(input)
}
document.body.appendChild(form);
form.submit();
}

Vous pourriez vous jQuery déclencher la méthode de soumettre le formulaire, tout comme vous appuyez sur un bouton, comme ça,

$('form').trigger('submit')

il soumettra sur le navigateur.