web-dev-qa-db-ja.com

HTTP POSTリクエストをブックマークまたはGETリクエストの場合と同様の何かに保存する

次のようなGETリクエストでブックマークを保存できます。

http://url.com/service?variable=value

POSTリクエストを何らかの方法でChromeに保存できますか？おそらくプラグインを使用していますか？あるいはFirefoxに？

これは、毎回フォームに入力する必要がなく、ブックマークに保存してすばやく起動するという考え方です。

google-chromehttpbookmarks
26
Petruza

これは、毎回フォームに入力する必要がなく、ブックマークに保存してすばやく起動するという考え方です。

この目的のために、次のHTMLページが行います。ほとんどのブラウザで動作するはずです。

<html>
    <head>
        <title>getToPost</title>
        <script>
            function getToPost()
            {
                var form = document.getElementsByTagName('form')[0];
                form.style.visibility = 'hidden';
                form.action = document.location.hash.substr(1);
                var search = decodeURIComponent(document.location.search);
                search = search.substr(1).split('&');
                for(var i = 0, j = search.length, input; i < j; i++)
                {
                    input = document.createElement('input');
                    search[i] = search[i].split('=');
                    input.name = search[i][0];
                    input.value = search[i][1];
                    form.appendChild(input);
                }
                form.submit();
            }
        </script>
    </head>
    <body onload="getToPost()">
        <form method="POST"></form>
    </body>
</html>

C:\getToPostとして保存すると、次のURLをブックマークできます。

file:///C:/getToPost?name1=value1&name2=value2#http://url.com/service

名前または値のほとんどの文字を文字通り使用できます。通常どおりに以下をエンコードします。

#   ->   %23
%   ->   %25
&   ->   %26
=   ->   %3D
17
Dennis

アドオンや外部ファイルに依存する必要のないクロスブラウザーソリューションを探す場合は、次の構文を使用して、JavaScriptをブックマークに直接配置してこれを実現できます。

javascript:(function(){ <Your Javascript code goes here> })();

デニスの答えからいくつかのコードを借りて説明します：

javascript:(function()
{ 
var form = document.getElementsByTagName('form')[0];
form.style.visibility = 'hidden';
form.method = 'post';
form.action = 'https://your.urlgoes.here/build?delay=0sec';
var search = 'name=ENVIRONMENT&value=production&name=DEPLOYTYPE&value=Incremental&name=BRANCH&value=master&statusCode=303&redirectTo=.&json={"parameter": [{"name": "ENVIRONMENT", "value": "production"}, {"name": "DEPLOYTYPE", "value": "Incremental"}, {"name": "BRANCH", "value": "master"}], "statusCode": "303", "redirectTo": "."}&Submit=Build';
search = search.substr(1).split('&');
for(var i = 0, j = search.length, input; i < j; i++)
{
input = document.createElement('input');
search[i] = search[i].split('=');
input.name = search[i][0];
input.value = search[i][1];
form.appendChild(input);
}
 form.submit();}
)();

欠点は、ブックマークが1行であるため、これらすべてを1行で入力する必要があるため、作業に少し頭が下がる可能性があることです。これはブックマーク自体に入ります：

javascript:(function(){    var form = document.getElementsByTagName('form')[0];   form.style.visibility = 'hidden';   form.method = 'post';   form.action = 'https://your.urlgoes.here/build?delay=0sec';   var search = 'name=ENVIRONMENT&value=production&name=DEPLOYTYPE&value=Incremental&name=BRANCH&value=master&statusCode=303&redirectTo=.&json={"parameter": [{"name": "ENVIRONMENT", "value": "production"}, {"name": "DEPLOYTYPE", "value": "Incremental"}, {"name": "BRANCH", "value": "master"}], "statusCode": "303", "redirectTo": "."}&Submit=Build';   search = search.substr(1).split('&');   for(var i = 0, j = search.length, input; i < j; i++)   {   input = document.createElement('input');   search[i] = search[i].split('=');   input.name = search[i][0];   input.value = search[i][1];   form.appendChild(input);   }    form.submit();   })();

いくつかのスペースを使用して、より読みやすいものに簡単に変換し、1行に戻すことができます。上記の例では、Notepad ++などで「」を\ r\nに置き換えて、複数行に戻すことができます。次に、それを1行に変換して戻すには、\ r\nの検索と置換を ""に置き換えると、1行に変換されます。それはそれが少し心の曲がりを少なくします...

6
jotap

最新のブラウザー機能とES6を使用したJavaScriptブックマークレットアプローチの短いバージョン：

post('https://example.com', {foo: 'bar'})

function post(url, formData) {
  const makeElem = (tag, props) => Object.assign(document.createElement(tag), props)
  const form = makeElem('form', { action: url, method: 'post', hidden: true })
  for (const [name, value] of Object.entries(formData)) {
    form.appendChild(makeElem('input', { name, value }))
  }
  document.body.appendChild(form)
  form.submit()
}

以下をブックマークターゲットとして設定し、URLとformDataを適切に置き換えます。

javascript:post('https://example.com',{foo:'bar'});function post(a,b){const c=(e,f)=>Object.assign(document.createElement(e),f),d=c('form',{action:a,method:'post',hidden:true});for(const[e,f]of Object.entries(b))d.appendChild(c('input',{name:e,value:f}));document.body.appendChild(d),d.submit()}
3
raphinesse

他の答えに基づいて構築してください！

コードのデバッグバージョン、およびクリーンアップとjsbeautifier.org/。

(function() {
    var ThisAction = 'https://your.urlgoes.here/build?delay=0sec';
    /* A little JSON never hurt anyone */
    var ThisPost = {
        name: 'ENVIRONMENT',
        value: 'production',
        name: 'DEPLOYTYPE',
        value: 'Incremental',
        name: 'BRANCH',
        value: 'master',
        statusCode: '303',
        redirectTo: '.',
        json: '{"parameter": [{"name": "ENVIRONMENT", "value": "production"}, {"name": "DEPLOYTYPE", "value": "Incremental"}, {"name": "BRANCH", "value": "master"}], "statusCode": "303", "redirectTo": "."}',
        Submit: 'Build'
    };

    /* Help us locate this function */
    console.trace();
    /* See what we are looking at */
    console.log(document);
    var form = document.getElementsByTagName('form')[0];
    form.style.visibility = 'hidden';
    form.method = 'post';
    form.action = ThisAction;
    for (var key in ThisPost) {
        if (ThisPost.hasOwnProperty(key)) {
            input = document.createElement('input');
            input.name = key;
            input.value = ThisPost[key];
            form.appendChild(input);
        }
    }
    /* form.submit(); */
})();

明らかに、対応するhtmlがない場合、タグ名が「form」の要素は存在しない可能性が高く、存在する場合は状況が悪化します。上記はこれをよく示しています。 ChromeのJavaScriptでは、URI /ブックマークが新しいタブで機能しないことに注意してください。最初に1回ナビゲートする必要があります。これによりドキュメントオブジェクトが生成されますが、javascript：alert（ 't'）だけでも生成されます。何もしません。

以下を提案します。

(function() {
    var ThisAction = 'https://your.urlgoes.here/build?optional=uri_get';
    /* A little JSON never hurt anyone */
    var ThisPost = {
        multiple: 'value',
        key: 'pairs',
        or: 'JSON like so...',
        note: 'the double quotes and last item with NO trailing comma.',
        json: '{parameter: [{name: "stuff"}]}'
    };

    var form = document.createElement('form');
    form.style.visibility = 'hidden';
    form.method = 'post';
    form.action = ThisAction;
    for (var key in ThisPost) {
        if (ThisPost.hasOwnProperty(key)) {
            var input = document.createElement('input');
            input.name = key;
            input.value = ThisPost[key];
            form.appendChild(input);
        }
    }
    document.body.appendChild(form);
    form.submit();
})();

デバッグ設定を削除し、サンプル入力をクリーンアップして、予想される内容をより明確にします。 http://jscompress.com/ などを実行して、1行を取得します。

!function(){var e="https://your.urlgoes.here/build?optional=uri_get",t={multiple:"value",key:"pairs",or:"JSON like so...",note:"the double quotes and last item with NO trailing comma.",json:'{parameter: [{name: "stuff"}]}'},i=document.createElement("form");i.style.visibility="hidden",i.method="post",i.action=e;for(var o in t)if(t.hasOwnProperty(o)){var a=document.createElement("input");a.name=o,a.value=t[o],i.appendChild(a)}document.body.appendChild(i),i.submit()}();

編集：実用的な例を提供します。

米国ミネソタ州ミネアポリスでは、これを使用してFree WiFi ESSID「USIW Free WiFi」にアクセスします。 https://login.usiwireless.com/mplsfree/logon.php?originalurl=www.google.com/ を使用してアカウントを登録した後、不正使用の理由からクレジットカードが必要になります。

これを使用して、明らかな置き換えを行い、ネットワークにログインします。

javascript:!function(){var e="https://login.usiwireless.com/mplsfree/logon.pl",o={usernameLogin:"USER",passwordLogin:"PASSWORD",originalurl:"www.google.com/"},n=document.createElement("form");n.style.visibility="hidden",n.method="post",n.action=e;for(var i in o)if(o.hasOwnProperty(i)){var t=document.createElement("input");t.name=i,t.value=o[i],n.appendChild(t)}document.body.appendChild(n),n.submit()}();
3
Mike Mestnik

これは古い質問であり、回答は承認されています。ただし、その答えは非常に手作業であり、ユーザーがJavaScriptプログラミングを行う必要があります。他のブラウザのアドオン/拡張機能/プラグインがリストされていますが、それらは最新のブラウザバージョンでは動作しないか、またはまだ手動です。ブックマークレットを生成するブックマークレット（@raphinesseの回答からの変更されたコードを含む）を書きました。私のブックマークレットはこちらです https://github.com/GlenCoakley/createFormSubmittingBookmarklets 。

0
Glen

同じ問題に直面したとき、Firefox用のこの美しいアドオンを見つけました。 Bookmark POST

そのブックマークを使用して、ブックマークを付けた4つの簡単なステップPOSTリクエスト（JavaScriptは不要）：

  1. ブックマークするフォームを含むページを開き、「標準的な」方法でフォームに入力します。まだ提出しないでください。
  2. Web-Developer Tools-> Network Analysisを開きます。
  3. フォームを送信します。送信はネットワーク分析に表示されます。そこで「編集して再送信」を選択し、「リクエストボディ」をコピーできます。
  4. フォームページにブックマークを作成し、ブックマークPOSTDATA={YOUR_REQUEST_BODY_HERE}をブックマークdescriptionとして追加します。
0
SebastianH