이것이 가능한지 확실하지 않습니다. 그러나 하이퍼 링크가 일부 변수를 전달하고 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에는 사용하기로 결정한 멋진 게시 기능이 내장되어 있습니다.
<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. 대신 메소드를 사용해야합니다 . 즉각적인 영향은 다음과 같습니다.
- 링크를 클릭하면 탭을 URL에 다시로드해야합니다.
href - 메소드가 POST이므로로드 할 대상 페이지의 URL에 쿼리 문자열이 없어야합니다.
- 해당 페이지는 매개 변수 (이름 및 값)로 데이터를 수신해야합니다.
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/ )