책갈피 또는 GET 요청과 유사한 방식으로 HTTP POST 요청 저장 GET 요청과 함께

다음과 같이 GET 요청과 함께 책갈피를 저장할 수 있습니다.

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

Chrome에서 POST 요청을 어떤 방식으로 저장할 수 있습니까? 플러그인이 있을까요? 아니면 Firefox에서?

아이디어는 이것을 책갈피에 저장하고 매번 양식을 채우지 않고 신속하게 실행하는 것입니다.



답변

아이디어는 이것을 책갈피에 저장하고 매번 양식을 채우지 않고 신속하게 실행하는 것입니다.

이를 위해 다음 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


답변

애드온 또는 외부 파일에 의존 할 필요가없는 크로스 브라우저 솔루션을 찾는 경우 다음 구문을 사용하여 Javascript를 책갈피에 직접 배치하여이를 달성 할 수 있습니다.

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

설명하기 위해 Denis의 답변에서 일부 코드를 차용합니다.

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

단점은 북마크가 한 줄이기 때문에이 모든 것이 한 줄로 가야한다는 것입니다. 이것은 북마크 자체에 들어갑니다.

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

더 읽기 쉬운 것으로 다시 한 줄로 쉽게 변환하기 위해 많은 공간을 사용할 수 있습니다. 위의 예에서 “”는 메모장 + +와 같이 \ r \ n으로 바꿔서 여러 줄로 다시 변환 할 수 있습니다. 그런 다음이를 한 줄로 다시 변환하려면 찾기 및 바꾸기를 “\”로 바꾸면 다시 한 줄로 변환됩니다. 그것은 약간의 마음 굽힘을 덜 만듭니다 …


답변

다른 답변을 기반으로!

코드의 디버그 버전과 정리 및 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’인 요소가 존재하지 않을 수 있습니다. 위는 이것을 잘 보여줍니다. 크롬 자바 스크립트에서 URI / 북마크는 새 탭에서 작동하지 않으므로 먼저 한 번 탐색해야합니다. 이것은 문서 객체를 채우고 심지어 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/ 등을 통해 실행 하고 한 줄을 얻으십시오.

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

편집 : 실제 예제를 제공하십시오.

미국 미네소타 주 미니애폴리스에서는이 기능을 사용하여 무료 WiFi ESSID “USIW 무료 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()}();


답변

최신 브라우저 기능과 ES6을 사용하는 자바 스크립트 북마크 접근 방식의 짧은 버전 :

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', style: 'display: none' })
  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',style:'display: none'});for(const[e,f]of Object.entries(b))d.appendChild(c('input',{name:e,value:f}));document.body.appendChild(d),d.submit()}


답변

같은 문제에 직면했을 때 Firefox 용이 부가 기능을 발견했습니다. Bookmark POST

이 책갈피를 사용하면 책갈피가 지정된 POST 요청에 대한 쉬운 4 단계를 수행 할 수 있습니다 (자바 스크립트 필요 없음).

  1. 북마크하려는 양식이있는 페이지를 열고 “일반적인”방식으로 양식을 작성하십시오. 아직 제출하지 마십시오.
  2. 웹 개발자 도구-> 네트워크 분석을여십시오.
  3. 양식을 제출하십시오. 제출은 네트워크 분석에 나타납니다. “편집 후 다시 전송”을 선택하고 “요청-본문”을 복사 할 수 있습니다.
  4. 양식 페이지에 책갈피를 작성 POSTDATA={YOUR_REQUEST_BODY_HERE}하고 책갈피 설명으로 문자열 을 추가하십시오 .

답변

나는 이것이 받아 들일 수있는 오래된 질문이라는 것을 알고 있습니다. 그 대답은 사용자에게 자바 스크립트 프로그래밍 노력이 필요한 수동 작업입니다. 다른 브라우저 애드온 / 확장자 / 플러그인이 나열되어 있지만 최신 브라우저 버전에서 작동하지 않거나 여전히 수동입니다. 나는 북마크릿 (@raphinesse의 답변에서 수정 된 코드 포함)을 생성하는 북마크를 작성했습니다. 내 북마크릿은 https://github.com/GlenCoakley/createFormSubmittingBookmarklets 입니다.


답변