IT

링크에 GET 대신 POST를 사용하다

itgroup 2023. 1. 15. 17:03
반응형

링크에 GET 대신 POST를 사용하다

이게 가능하긴 한 건지 모르겠어.하지만 하이퍼링크를 통해 변수를 전달하고 GET가 아닌 POST(폼 등)를 사용하는 방법을 아는 사람이 있는지 궁금합니다.

여기에는 JavaScript가 필요하지 않습니다.이 답변이 게시된 시점부터 이 질문에 대한 모든 답변은 JavaScript를 사용하는 것과 관련이 있습니다.

송신하는 데이터를 포함한 숨김 필드가 있는 폼을 작성한 후 링크와 같이 폼의 [Submit]버튼을 스타일링하면, HTML 및 CSS만으로 간단하게 이 작업을 실시할 수 있습니다.

예를 들어 다음과 같습니다.

.inline {
  display: inline;
}

.link-button {
  background: none;
  border: none;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  font-size: 1em;
  font-family: serif;
}
.link-button:focus {
  outline: none;
}
.link-button:active {
  color:red;
}
<a href="some_page">This is a regular link</a>

<form method="post" action="some_page" class="inline">
  <input type="hidden" name="extra_submit_param" value="extra_submit_value">
  <button type="submit" name="submit_param" value="submit_value" class="link-button">
    This is a link that sends a POST request
  </button>
</form>

사용하는 정확한 CSS는 사이트 상의 일반 링크의 스타일에 따라 다를 수 있습니다.

게시할 값을 저장하는 숨겨진 입력이 있는 양식을 만들고, 해당 양식의 작업을 대상 URL로 설정하고, 게시할 양식 방법을 설정합니다.그런 다음 링크를 클릭하면 양식을 제출하는 JS 함수를 트리거합니다.

예를 들어 여기를 참조해 주세요.이 예에서는 jQuery가 없는 순수 JavaScript를 사용하고 있습니다.이미 가지고 있는 것 이상의 것을 인스톨 하고 싶지 않은 경우는, 이 옵션을 선택할 수 있습니다.

<form name="myform" action="handle-data.php" method="post">
  <label for="query">Search:</label>
  <input type="text" name="query" id="query"/>
  <button>Search</button>
</form>

<script>
var button = document.querySelector('form[name="myform"] > button');
button.addEventListener(function() {
  document.querySelector("form[name="myform"]").submit();
});
</script>

Javascript 기능을 사용할 수 있습니다.JQuery를 사용하기로 결정한 경우, JQuery에는 훌륭한 포스트 기능이 내장되어 있습니다.

JQuery Post

<script language="javascript"> 

   function DoPost(){
      $.post("WhateverPage.php", { name: "John", time: "2pm" } );  //Your values here..
   }

</script>



<a href="javascript:DoPost()">Click Here</A>

이것은 오래된 질문이지만, 어느 대답도 요구를 충분히 만족시키지 못합니다.그래서 다른 답을 덧붙입니다.

작동하는 .즉, " " " " " 입니다. " 입니다.POST 방법은 사용법이 합니다.GET직접적인 영향은 다음과 같습니다.

  1. 하여 " " " " " "의 해야 합니다.href
  2. 메서드는 POST이므로 로드하는 대상 페이지의 URL에는 쿼리 문자열이 없습니다.
  3. 는 파라미터과 값합니다.POST

저는 여기서 jquery를 사용하고 있습니다만, 이것은 네이티브 아피스로도 할 수 있습니다(물론 더 단단하고 더 깁니다.

<html>
<head>
    <script src="path/to/jquery.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {

            $("a.post").click(function(e) {
                e.stopPropagation();
                e.preventDefault();
                var href = this.href;
                var parts = href.split('?');
                var url = parts[0];
                var params = parts[1].split('&');
                var pp, inputs = '';
                for(var i = 0, n = params.length; i < n; i++) {
                    pp = params[i].split('=');
                    inputs += '<input type="hidden" name="' + pp[0] + '" value="' + pp[1] + '" />';
                }
                $("body").append('<form action="'+url+'" method="post" id="poster">'+inputs+'</form>');
                $("#poster").submit();
            });
        });
    </script>
</head>
<body>
    <a class="post" href="reflector.php?color=blue&weight=340&model=x-12&price=14.800">Post it!</a><br/>
    <a href="reflector.php?color=blue&weight=340&model=x-12&price=14.800">Normal link</a>
</body>
</html>

결과를 보려면 다음을 리플렉터로 저장하십시오.php는 상기의 보존처와 같은 디렉토리에 있습니다.

<h2>Get</h2>
<pre>
<?php print_r($_GET); ?>
</pre>

<h2>Post</h2>
<pre>
<?php print_r($_POST); ?>
</pre>

또 다른 작업 예로는 posted와 유사한 방법을 사용하여 html 폼을 만들고 javascript를 사용하여 게시물을 시뮬레이션합니다.이를 통해 데이터를 새 페이지에 게시하고 새 창/탭에서 엽니다.

HTML

<form name='myForm' target="_blank" action='newpage.html' method='post'>
<input type="hidden" name="thisIsTheParameterName" value="testDataToBePosted"/>
</form>

자바스크립트

document.forms["myForm"].submit();

HTML + JQuery : POST에서 숨김 폼을 제출하는 링크.

저는 이 모든 답을 이해하는 데 많은 시간을 할애했고, 모든 답변에 흥미로운 세부 사항이 포함되어 있기 때문에, 마침내 나에게 효과가 있었고, 그 단순함을 위해 제가 선호하는 결합 버전이 여기 있습니다.

다시 한 번 숨겨진 폼을 만들고 페이지의 다른 위치에 있는 링크를 클릭하여 제출합니다.양식이 페이지 본문의 어디에 배치되는지는 중요하지 않습니다.

폼의 코드:

<form id="myHiddenFormId" action="myAction.php" method="post" style="display: none">
  <input type="hidden" name="myParameterName" value="myParameterValue">
</form>

설명:

display: none을을숨숨숨숨다다또는 div 또는 다른 요소에 삽입하여 다음 명령을 설정할 수 있습니다.display: none바람을을쐬쐬쐬

type="hidden"는 표시되지 않는 fild를 생성하지만 그 데이터는 어느 쪽이든 액션으로 전송됩니다(W3C 참조).이것이 가장 간단한 입력 유형인 것을 알고 있습니다.

링크 코드:

<a href="" onclick="$('#myHiddenFormId').submit(); return false;" title="My link title">My link text</a>

설명:

있는 ★★★★href같은 페이지를 대상으로 합니다.하지만 이 경우엔 별 문제가 되지 않습니다.return false브라우저가 링크를 따라가지 못하도록 합니다.을 사용하다제 경우 마지막에는 리다이렉션이 포함되어 있었습니다.

onclick되었습니다.href="javascript:..."mplungjan이 지적한 바와 같이.그$('#myHiddenFormId').submit();폼을 송신하기 위해서 사용되었습니다(코드가 매우 작기 때문에 함수를 정의할 필요가 없습니다).

는 다른 됩니다.<a>요소.실제로는, 다른 임의의 요소를 사용할 수 있습니다.<a>를 들어 a (a)<span>★★★★★★★★★★★★★★★★」

javascript를 사용하는 대신 숨겨진 폼을 보내는 라벨을 사용할 수도 있습니다.매우 심플하고 작은 솔루션.라벨은 html의 임의의 위치에 둘 수 있습니다.

<form style="display: none" action="postUrl" method="post">
  <button type="submit" id="button_to_link"> </button>
</form>
<label style="text-decoration: underline" for="button_to_link">  link that posts </label>

이 jQuery 함수를 사용할 수 있습니다.

function makePostRequest(url, data) {
    var jForm = $('<form></form>');
    jForm.attr('action', url);
    jForm.attr('method', 'post');
    for (name in data) {
        var jInput = $("<input>");
        jInput.attr('name', name);
        jInput.attr('value', data[name]);
        jForm.append(jInput);
    }
    jForm.submit();
}

jsFiddle(http://jsfiddle.net/S7zUm/)의 예를 다음에 나타냅니다.

많은 투고에서 언급되었듯이 이는 직접 가능하지 않지만 다음과 같은 쉽고 성공적인 방법이 있습니다.우선 html 페이지 본문에 폼을 넣었습니다.이 페이지에는 송신용 버튼이 없고 입력도 숨겨져 있습니다.그런 다음 Javascript 기능을 사용하여 데이터를 얻고 양식을 보냅니다.이 방법의 장점 중 하나는 서버 측 코드에 따라 다른 페이지로 리디렉션할 수 있다는 것입니다.코드는 다음과 같습니다.필요한 장소에서는 POST 메서드를 사용합니다.

<script type="text/javascript" language="javascript">
function post_link(data){

    $('#post_form').find('#form_input').val(data);
    $('#post_form').submit();
};
</script>

   <form id="post_form" action="anywhere/you/want/" method="POST">
 {% csrf_token %}
    <input id="form_input" type="hidden" value="" name="form_input">
</form>

<a href="javascript:{}" onclick="javascript:post_link('data');">post link is ready</a>

페이지에 html 코드를 입력하지 않고 JS를 엄밀하게 유지하는 보다 역동적인 접근 방식을 제안합니다.

$("a.AS-POST").on('click', e => {
  e.preventDefault()
  let frm = document.createElement('FORM')
  frm.id='frm_'+Math.random()
  frm.method='POST'
  frm.action=e.target.href
  document.body.appendChild(frm)
  frm.submit()
})

이것을 체크하면 도움이 됩니다.

$().redirect('test.php', {'a': 'value1', 'b': 'value2'});

언급URL : https://stackoverflow.com/questions/3915917/make-a-link-use-post-instead-of-get

반응형

'IT' 카테고리의 다른 글

명령줄 mac에서 mysql에 액세스할 수 없습니다.  (0) 2023.01.15
PHP 5: 지속 vs 정적  (0) 2023.01.15
PHP 구문 질문:물음표와 콜론은 무슨 뜻입니까?  (0) 2023.01.15
기존 값이 있는 Vue 형식 입력 바인딩  (0) 2023.01.15
CreateProcess 오류=main() 메서드를 실행할 때 파일 이름 또는 확장자가 너무 깁니다.  (0) 2023.01.15

'IT'의 다른글

  • 현재글링크에 GET 대신 POST를 사용하다

관련글

댓글

티스토리툴바