フォーム送信のような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

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

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

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

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

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

驚くほど素晴らしいDropMixミュージックミキシングカードゲームは30ドルで驚くべき取引です

驚くほど素晴らしいDropMixミュージックミキシングカードゲームは30ドルで驚くべき取引です

DropMixはNFC対応のカードゲームで、基本的にはリミックスアーティストになります。現在、Amazonでは$ 30まで下がっており、これまでで最高の価格に匹敵します。ロックバンドで有名なHarmonixによって開発されたDropMixは、おそらく少し野心的すぎるように思われます。結局のところ、ほとんどの人は素晴らしいリズムを持っていませんが、ゲームは驚くほどうまく実行されます。

メアリーJ.ブライジがついにハリウッドウォークオブフェイムスターを獲得

メアリーJ.ブライジがついにハリウッドウォークオブフェイムスターを獲得

写真:APメアリーJ.ブライジは、間もなくハリウッドウォークオブフェイムのスターを獲得します。これは、メアリーJよりもハリウッドウォークオブフェイムのほうが正直なところ恩恵です。

MeltdownとSpectreの脆弱性についてこれまでに知っていることはすべて、簡単な方法で説明されています

MeltdownとSpectreの脆弱性についてこれまでに知っていることはすべて、簡単な方法で説明されています

画像:グラズ工科大学/ NataschaEiblがデザインしたロゴ。MeltdownとSpectreは、攻撃者がシステムメモリに保存されているあらゆる種類の情報にアクセスできるようにする2つの脆弱性に付けられた名前です。

彼のニューヨークの家から追い出されようとしている97歳の第二次世界大戦の獣医。メリーエフィングクリスマス

彼のニューヨークの家から追い出されようとしている97歳の第二次世界大戦の獣医。メリーエフィングクリスマス

日本人に襲われたときに真珠湾にいた97歳の第二次世界大戦のベテランが、ニューヨークのブルックリンから追い出されています。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

投資ノート:Bioscout AU$300万シード

投資ノート:Bioscout AU$300万シード

Bioscoutは、農家を運転席に置くという使命を負っています。Artesian(GrainInnovate)やUniseedと並んで、最新のシードラウンドでチームを支援できることをうれしく思います。問題真菌症による重大な作物の損失は、農民にとって試練であることが証明されています。

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

遠隔医療は、パンデミック後の時代では新しいものではなく、時代遅れの分野でもありません。しかし、業界を詳しく見ると、需要と供給の強力な持続可能性と、米国で絶え間ない革命となる強力な潜在的成長曲線を示しています。

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

2021年は、世界的なベンチャーキャピタル(VC)の資金調達にとって記録的な年でした。DealStreetAsiaによると、東南アジアも例外ではなく、この地域では年間で記録的な25の新しいユニコーンが採掘されました。

ムーアの法則を超えて

ムーアの法則を超えて

計算に対する私たちの欲求とムーアの法則が提供できるものとの間には、指数関数的に増大するギャップがあります。私たちの文明は計算に基づいています—建築と想像力の現在の限界を超える技術を見つけなければなりません。

Language