[javascript] 링크가 GET 대신 POST를 사용하도록하십시오

JAVASCRIPT / 글쓴이

이것이 가능한지 확실하지 않습니다. 그러나 하이퍼 링크가 일부 변수를 전달하고 GET과는 달리 POST (양식과 같은)를 사용하는 방법을 아는 사람이 있는지 궁금합니다.

답변

게시 할 값을 보유하는 숨겨진 입력이있는 양식을 작성하고 양식의 조치 를 대상 url로 설정하고 양식 메소드를 post로 설정하십시오 . 그런 다음 링크를 클릭하면 양식을 제출하는 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가 필요하지 않습니다. 이 답변이 게시 된 시점 에서이 질문에 대한 모든 답변에는 어떤 식 으로든 JavaScript를 사용하는 것이 포함되어 있기 때문에 분명히하고 싶었습니다 .

제출하려는 데이터가 포함 된 숨겨진 필드가있는 양식을 작성한 다음 양식의 제출 단추를 링크처럼 보이게 하여 순수 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는 사이트의 일반 링크 스타일에 따라 다를 수 있습니다.

답변

자바 스크립트 함수를 사용할 수 있습니다. JQuery에는 사용하기로 결정한 멋진 게시 기능이 내장되어 있습니다.

jQuery 포스트

<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. 링크를 클릭하면 탭을 URL에 다시로드해야합니다. href
  2. 메소드가 POST이므로로드 할 대상 페이지의 URL에 쿼리 문자열이 없어야합니다.
  3. 해당 페이지는 매개 변수 (이름 및 값)로 데이터를 수신해야합니다. POST

여기서 jquery를 사용하고 있지만 네이티브 API (물론 더 길고 길다)로 수행 할 수 있습니다.

<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>

결과를 보려면 위의 저장 디렉토리와 같은 디렉토리에 reflector.php로 다음을 저장하십시오.

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

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

답변

비슷한 접근 방식을 사용하여 게시 한 다른 작업 예제 : 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입니다를 작성하지만 데이터는 작업 eitherways (송신한다 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 <span>또는 이미지) 대신 다른 요소를 사용할 수 있습니다 .

답변

이 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/ )