답변:
게시 할 값을 보유하는 숨겨진 입력이있는 양식을 작성하고 양식의 조치 를 대상 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>GET하시겠습니까? 우리는 get형태가 없었습니다.
이를 위해 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('page.php', {param: 1}, function() { window.location.href = 'page'.php' });
<a href="whyjavascript.html" id="postIt">Click Here</a>있고$("#postIt").on("click",function(e) { e.preventDefault(); $.post("WhateverPage.php", { name: "John", time: "2pm" } ); });
이것은 오래된 질문이지만 요청 중 전체를 충족시키는 답변은 없습니다. 그래서 다른 대답을 추가하고 있습니다.
내가 이해 한 것처럼 요청 된 코드는 일반적인 하이퍼 링크 작동 방식을 한 번만 변경 POST해야합니다 GET. 대신 메소드를 사용해야합니다 . 즉각적인 영향은 다음과 같습니다.
hrefPOST여기서 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/ )
많은 게시물에서 언급했듯이, 이것은 직접적으로 가능하지는 않지만 쉽고 성공적인 방법은 다음과 같습니다. 먼저 html 페이지 본문에 양식을 제출합니다. 여기에는 제출 버튼과 입력 내용이 없습니다. 숨겨져 있습니다. 그런 다음 자바 스크립트 함수를 사용하여 데이터를 가져 와서 양식을 보냅니다. 이 방법의 장점 중 하나는 서버 쪽 코드에 따라 다른 페이지로 리디렉션하는 것입니다. 코드는 다음과 같습니다. 이제 어디에서나 "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 어디에서나 사용할 수 있습니다.
<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>이것이 당신을 도울 것입니다 확인
$().redirect('test.php', {'a': 'value1', 'b': 'value2'});