フォーム送信のようなJavaScriptPOSTリクエスト

1589
Joseph Holsten 2008-09-26 05:15.

ブラウザを別のページに誘導しようとしています。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>

次に、DOMからフォームを送信します。

しかし、本当に私は私が言うことができるJavaScriptコードが欲しいです

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

最高のクロスブラウザ実装は何ですか?

編集

はっきりしなかったのでごめんなさい。フォームを送信するのと同じように、ブラウザの場所を変更するソリューションが必要です。これがXMLHttpRequestで可能である場合、それは明らかではありません。そして、これは非同期であってはならず、XMLを使用してはならないので、Ajaxは答えではありません。

30 answers

2200
Rakesh Pai 2008-09-26 05:28.

<input>フォームにsを動的に作成し、送信します

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

例:

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

編集:これは非常に賛成されているので、私は人々がこれをたくさんコピーして貼り付けるだろうと推測しています。そこでhasOwnProperty、不注意なバグを修正するためのチェックを追加しました。

133
Ryan Delucchi 2011-04-04 14:21.

これは、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();
}
74
Alexandre Victoor 2008-09-26 05:33.

@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();

もちろん、PrototypeやjQueryなどのJavaScriptフレームワークを使用する必要があります...

55
Jonny Buchanan 2008-09-26 05:29.

この回答でcreateElement提供されている関数を使用します。これは、通常:で作成される要素のname属性がIEで壊れているために必要です。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);
}
39
Kendall Hopkins 2010-07-16 10:50.

Rakesh Paiの答えは素晴らしいですが、(Safariで)というフィールドを持つフォームを投稿しようとすると、問題が発生しますsubmit。たとえば、post_to_url("http://google.com/",{ submit: "submit" } );。この可変空間の衝突を回避するために、関数に少しパッチを適用しました。

    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!
32
gaby de wilde 2013-08-19 15:00.

いいえ。フォーム送信のようにJavaScriptのPOSTリクエストを送信することはできません。

あなたが持つことができるのはHTMLのフォームであり、それをJavaScriptで送信します。(このページで何度も説明されているように)。

HTMLは自分で作成できます。HTMLを作成するのにJavaScriptは必要ありません。人々がそれを提案した場合、それはばかげているでしょう。

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

関数は、フォームを希望どおりに構成するだけです。

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

次に、のように使用します。

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

しかし、私は関数を省略して実行します。

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

最後に、スタイルの決定はccsファイルで行われます。

#ninja{ 
  display:none;
}

個人的には、フォームは名前でアドレス指定する必要があると思いますが、それは今のところ重要ではありません。

27
Head 2009-01-24 13:53.

Prototypeがインストールされている場合は、コードを強化して、次のように非表示のフォームを生成して送信できます。

 var form = new Element('form',
                        {method: 'post', action: 'http://example.com/'});
 form.insert(new Element('input',
                         {name: 'q', value: 'a', type: 'hidden'}));
 $(document.body).insert(form);
 form.submit();
26
kritzikratzi 2012-03-22 15:41.

これはrakeshの答えですが、配列(フォームでは非常に一般的です)をサポートしています。

プレーン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();
}

ああ、これがjqueryのバージョンです:(わずかに異なるコードですが、要約すると同じものになります)

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(); 
}
18
Joseph Holsten 2008-09-26 06:05.

1つの解決策は、フォームを生成して送信することです。1つの実装は

function post_to_url(url, params) {
    var form = document.createElement('form');
    form.action = url;
    form.method = 'POST';

    for (var i in params) {
        if (params.hasOwnProperty(i)) {
            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = i;
            input.value = params[i];
            form.appendChild(input);
        }
    }

    form.submit();
}

だから私は簡単なURL短縮ブックマークレットを実装することができます

javascript:post_to_url('http://is.gd/create.php', {'URL': location.href});
17
emragins 2014-01-28 11:25.

さて、他のすべての投稿を読んでおけば、RakeshPaiの回答からこれを作成する時間を無駄にすることはありませんでした。これは、配列とオブジェクトで機能する再帰的なソリューションです。jQueryへの依存はありません。

フォーム全体を配列のように送信する必要がある場合を処理するためのセグメントを追加しました。(つまり、アイテムのリストの周りにラッパーオブジェクトがない場合)

/**
 * 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();
};
14
JLavoie 2013-09-11 10:22.

最も簡単な方法は、Ajax PostRequestを使用することです。

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

どこ:

  • データはオブジェクトです
  • dataTypeは、サーバーが期待するデータ(xml、json、script、text、html)です。
  • urlは、REStサーバーまたはHTTP-POSTを受け入れるサーバー側の関数のアドレスです。

次に、成功ハンドラーで、window.locationなどを使用してブラウザーをリダイレクトします。

13
Alan Storm 2008-09-26 05:26.

ここに3つのオプションがあります。

  1. 標準のJavaScriptの答え:フレームワークを使用してください!ほとんどのAjaxフレームワークは、XMLHTTPRequestPOSTを作成する簡単な方法を抽象化しています。

  2. 自分でXMLHTTPRequestリクエストを作成し、getではなくopenメソッドにpostを渡します。(XMLHTTPRequest(Ajax)でのPOSTメソッドの使用の詳細。)

  3. JavaScriptを使用して、フォームを動的に作成し、アクションを追加し、入力を追加して送信します。

13
Katy 2008-09-26 05:39.

他の人が次のような提案をしたように、私はAjaxルートをたどります。

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");
12
beauburrier 2010-09-22 11:22.

これが私がjQueryを使って書いた方法です。FirefoxとInternetExplorerでテスト済み。

function postToUrl(url, params, newWindow) {
    var form = $('<form>'); form.attr('action', url); form.attr('method', 'POST'); if(newWindow){ form.attr('target', '_blank'); } var addParam = function(paramName, paramValue) { var input = $('<input type="hidden">');
      input.attr({ 'id':     paramName,
                 'name':   paramName,
                 'value':  paramValue });
      form.append(input);
    };

    // Params is an Array.
    if(params instanceof Array){
        for(var i=0; i<params.length; i++) {
            addParam(i, params[i]);
        }
    }

    // Params is an Associative array or Object.
    if(params instanceof Object) {
        for(var key in params){
            addParam(key, params[key]);
        }
    }

    // Submit the form, then remove it from the page
    form.appendTo(document.body);
    form.submit();
    form.remove();
}
7
Adam Ness 2008-09-26 05:28.

プロトタイプのライブラリを使用すると、簡単にクエリ文字列の形式の文字列にJavaScriptのオブジェクト/構造を有効にすることができます「.toQueryString()」メソッドで、Hashtableオブジェクトが含まれています。投稿ではリクエストの「本文」がクエリ文字列形式の文字列である必要があるため、これによりAjaxリクエストが投稿として正しく機能するようになります。プロトタイプを使用した例を次に示します。

$req = new Ajax.Request("http://foo.com/bar.php",{ method: 'post', parameters: $H({
        name: 'Diodeus',
        question: 'JavaScript posts a request like a form request',
        ...
    }).toQueryString();
};
5
Chintan Thummar 2013-03-30 03:41.

私の場合、これは完全に機能します。

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

次のような機能で使用できます。

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

これを使用して、入力のすべての値を転記することができます。

4
mpen 2016-05-12 08:57.

他のいくつかは壊れているように見えるので、さらに別の再帰的解決策(私はそれらすべてをテストしませんでした)。これはlodash3.xとES6に依存します(jQueryは必要ありません):

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();
}
4
cmrichards 2018-09-01 07:33.

私のソリューションは、@ RakeshPaiによって現在受け入れられているソリューションとは異なり、深くネストされたオブジェクトをエンコードします。

'qs' npmライブラリとそのstringify関数を使用して、ネストされたオブジェクトをパラメータに変換します。

このコードはRailsバックエンドでうまく機能しますが、stringifyに渡されるオプションを変更することで、必要なバックエンドで機能するようにコードを変更できるはずです。Railsでは、arrayFormatを「ブラケット」に設定する必要があります。

import qs from "qs"

function normalPost(url, params) {
  var form = document.createElement("form");
  form.setAttribute("method", "POST");
  form.setAttribute("action", url);

  const keyValues = qs
    .stringify(params, { arrayFormat: "brackets", encode: false })
    .split("&")
    .map(field => field.split("="));

  keyValues.forEach(field => {
    var key = field[0];
    var value = field[1];
    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", key);
    hiddenField.setAttribute("value", value);
    form.appendChild(hiddenField);
  });
  document.body.appendChild(form);
  form.submit();
}

例:

normalPost("/people/new", {
      people: [
        {
          name: "Chris",
          address: "My address",
          dogs: ["Jordan", "Elephant Man", "Chicken Face"],
          information: { age: 10, height: "3 meters" }
        },
        {
          name: "Andrew",
          address: "Underworld",
          dogs: ["Doug", "Elf", "Orange"]
        },
        {
          name: "Julian",
          address: "In a hole",
          dogs: ["Please", "Help"]
        }
      ]
    });

これらのRailsパラメータを生成します。

{"authenticity_token"=>"...",
 "people"=>
  [{"name"=>"Chris", "address"=>"My address", "dogs"=>["Jordan", "Elephant Man", "Chicken Face"], "information"=>{"age"=>"10", "height"=>"3 meters"}},
   {"name"=>"Andrew", "address"=>"Underworld", "dogs"=>["Doug", "Elf", "Orange"]},
   {"name"=>"Julian", "address"=>"In a hole", "dogs"=>["Please", "Help"]}]}
2
lingceng 2015-11-21 23:07.

FormObjectはオプションです。ただし、FormObjectは現在ほとんどのブラウザでサポートされていません。

1
Robert Van Hoose 2008-09-26 05:40.

これは、アランのオプション2(上記)のようなものです。httpobjをインスタンス化する方法は、演習として残されています。

httpobj.open("POST", url, true);
httpobj.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
httpobj.onreadystatechange=handler;
httpobj.send(post);
1
bobef 2011-05-28 03:19.

これは、jQueryを使用したbeauSDのコードに基づいています。オブジェクトに対して再帰的に機能するように改善されています。

function post(url, params, urlEncoded, newWindow) {
    var form = $('<form />').hide(); form.attr('action', url) .attr('method', 'POST') .attr('enctype', urlEncoded ? 'application/x-www-form-urlencoded' : 'multipart/form-data'); if(newWindow) form.attr('target', '_blank'); function addParam(name, value, parent) { var fullname = (parent.length > 0 ? (parent + '[' + name + ']') : name); if(value instanceof Object) { for(var i in value) { addParam(i, value[i], fullname); } } else $('<input type="hidden" />').attr({name: fullname, value: value}).appendTo(form);
    };

    addParam('', params, '');

    $('body').append(form);
    form.submit();
}
1
AnthonyWJones 2008-09-26 05:20.

DHTMLを使用してフォームを動的に追加してから、送信することができます。

1
Bill Turner 2008-09-26 05:23.

jQueryやその$ .postメソッドのようなライブラリを使用できます。

1
drtechno 2018-01-20 15:41.

document.forms javaを使用してループし、フォーム内のすべての要素を取得してから、xhttp経由で送信します。したがって、これはjavascript / ajax submitの私のソリューションです(例としてすべてのhtmlが含まれています):

          <!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>
0
rauprog 2017-09-25 16:17.

ユーザーを自動的に投稿して別のページに誘導するために使用する方法は、非表示のフォームを作成してから自動送信することです。非表示のフォームは、Webページ上にまったくスペースを取りませんのでご安心ください。コードは次のようになります。

    <form name="form1" method="post" action="somepage.php">
    <input name="fielda" type="text" id="fielda" type="hidden">

    <textarea name="fieldb" id="fieldb" cols="" rows="" style="display:none"></textarea>
</form>
    document.getElementById('fielda').value="some text for field a";
    document.getElementById('fieldb').innerHTML="some text for multiline fieldb";
    form1.submit();

自動送信の適用

自動送信のアプリケーションは、ユーザーが他のページに自動的に入力したフォーム値をそのページに戻すことです。このようなアプリケーションは次のようになります。

fieldapost=<?php echo $_post['fielda'];>
if (fieldapost !="") {
document.write("<form name='form1' method='post' action='previouspage.php'>
  <input name='fielda' type='text' id='fielda' type='hidden'>
</form>");
document.getElementById('fielda').value=fieldapost;
form1.submit();
}
0
nikksan 2018-03-07 13:14.

これが私のやり方です。

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();
    }
0
OG Sean 2018-07-09 14:22.

POSTまたはGETを使用したリダイレクト用のjQueryプラグイン:

https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js

テストするには、上記の.jsファイルを含めるか、クラスをコピーしてコードに貼り付けてから、ここのコードを使用して、「args」を変数名に、「values」をそれぞれの変数の値に置き換えます。

$.redirect('demo.php', {'arg1': 'value1', 'arg2': 'value2'});
0
ling 2019-12-10 23:27.

上記のソリューションはいずれも、jQueryだけで深いネストされたパラメーターを処理しなかったため、これが私の2セントのソリューションです。

jQueryを使用していて、深くネストされたパラメーターを処理する必要がある場合は、以下のこの関数を使用できます。

    /**
     * Original code found here: https://github.com/mgalante/jquery.redirect/blob/master/jquery.redirect.js
     * I just simplified it for my own taste.
     */
    function postForm(parameters, url) {

        // generally we post the form with a blank action attribute
        if ('undefined' === typeof url) {
            url = '';
        }


        //----------------------------------------
        // SOME HELPER FUNCTIONS
        //----------------------------------------
        var getForm = function (url, values) {

            values = removeNulls(values);

            var form = $('<form>') .attr("method", 'POST') .attr("action", url); iterateValues(values, [], form, null); return form; }; var removeNulls = function (values) { var propNames = Object.getOwnPropertyNames(values); for (var i = 0; i < propNames.length; i++) { var propName = propNames[i]; if (values[propName] === null || values[propName] === undefined) { delete values[propName]; } else if (typeof values[propName] === 'object') { values[propName] = removeNulls(values[propName]); } else if (values[propName].length < 1) { delete values[propName]; } } return values; }; var iterateValues = function (values, parent, form, isArray) { var i, iterateParent = []; Object.keys(values).forEach(function (i) { if (typeof values[i] === "object") { iterateParent = parent.slice(); iterateParent.push(i); iterateValues(values[i], iterateParent, form, Array.isArray(values[i])); } else { form.append(getInput(i, values[i], parent, isArray)); } }); }; var getInput = function (name, value, parent, array) { var parentString; if (parent.length > 0) { parentString = parent[0]; var i; for (i = 1; i < parent.length; i += 1) { parentString += "[" + parent[i] + "]"; } if (array) { name = parentString + "[" + name + "]"; } else { name = parentString + "[" + name + "]"; } } return $("<input>").attr("type", "hidden")
                .attr("name", name)
                .attr("value", value);
        };


        //----------------------------------------
        // NOW THE SYNOPSIS
        //----------------------------------------
        var generatedForm = getForm(url, parameters);

        $('body').append(generatedForm);
        generatedForm.submit();
        generatedForm.remove();
    }

使用方法の例を次に示します。htmlコード:

<button id="testButton">Button</button>

<script>
    $(document).ready(function () {
        $("#testButton").click(function () {
            postForm({
                csrf_token: "abcd",
                rows: [
                    {
                        user_id: 1,
                        permission_group_id: 1
                    },
                    {
                        user_id: 1,
                        permission_group_id: 2
                    }
                ],
                object: {
                    apple: {
                        color: "red",
                        age: "23 days",
                        types: [
                            "golden",
                            "opal",
                        ]
                    }
                },
                the_null: null, // this will be dropped, like non-checked checkboxes are dropped
            });
        });
    });
</script>

また、テストボタンをクリックすると、フォームが投稿され、POSTで次の値が取得されます。

array(3) {
  ["csrf_token"] => string(4) "abcd"
  ["rows"] => array(2) {
    [0] => array(2) {
      ["user_id"] => string(1) "1"
      ["permission_group_id"] => string(1) "1"
    }
    [1] => array(2) {
      ["user_id"] => string(1) "1"
      ["permission_group_id"] => string(1) "2"
    }
  }
  ["object"] => array(1) {
    ["apple"] => array(3) {
      ["color"] => string(3) "red"
      ["age"] => string(7) "23 days"
      ["types"] => array(2) {
        [0] => string(6) "golden"
        [1] => string(4) "opal"
      }
    }
  }
}

注:フォームを現在のページ以外のURLに投稿する場合は、postForm関数の2番目の引数としてURLを指定できます。

したがって、たとえば(例を再利用するために):

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

お役に立てれば。

注2:コードはリダイレクトプラグインから取得されました。基本的には、必要に応じて単純化しただけです。

0
Canaan Etai 2019-02-13 23:13.

ボタンを押すのと同じように、jQueryのトリガーメソッドを使用してフォームを送信できます。

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

ブラウザに送信されます。

0
Kamil Kiełczewski 2020-06-16 09:59.

試してみてください

function post_to_url(url, obj) {
  let id=`form_${+new Date()}`; document.body.innerHTML+=` <form id="${id}" action="${url}" method="POST"> ${Object.keys(obj).map(k=>`
        <input type="hidden" name="${k}" value="${obj[k]}">
      `)}
    </form>`
  this[id].submit();  
}

// TEST - in second param object can have more keys
function jump() { post_to_url('https://example.com/', {'q':'a'}); }
Open chrome>networks and push button:
<button onclick="jump()">Send POST</button>

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

パンデミックは終わったかもしれないが、Covid-19 は終わっていない

2021 年 6 月 8 日にニューヨーク市で開催された covid-19 パンデミックで亡くなった人々の命を偲び、祝うために、ネーミング ザ ロスト メモリアルズが主催するイベントと行進の最中に、グリーンウッド墓地の正門から記念碑がぶら下がっています。週末、ジョー・バイデン大統領は、covid-19 パンデミックの終息を宣言しました。これは、過去 2 年以上にわたり、公の場でそうするための長い列の中で最新のものです。

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

デビル・イン・オハイオの予告編は、エミリー・デシャネルもオハイオにいることを明らかにしています

オハイオ州のエミリー・デシャネル みんな早く来て、ボーンズが帰ってきた!まあ、ショーボーンズではなく、彼女を演じた俳優. エミリー・デシャネルに最後に会ってからしばらく経ちました.Emily Deschanel は、長期にわたるプロシージャルな Bones の Temperance “Bones” Brennan としてよく知られています。

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

ドナルド・トランプはFBIのマー・ア・ラーゴ襲撃映像をリリースする予定ですか?

どうやら、ドナルド・トランプに近い人々は、今月初めにFBIによって家宅捜索された彼のMar-a-Lago財産からの映像を公開するよう彼に勧めています. 前大統領はテープを公開するかどうかを確認していませんが、息子はフォックス・ニュースにそうなるだろうと語った.

Andor は、他の Star Wars ショーから大きな距離を置きます。

Andor は、他の Star Wars ショーから大きな距離を置きます。

アンドールの一場面。数十年前、ジョージ・ルーカスがスター・ウォーズのテレビ番組を制作するのを妨げた主な理由は、お金でした。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language