ฉันไม่แน่ใจว่าสิ่งนี้เป็นไปได้หรือไม่ แต่ฉันสงสัยว่าถ้าใครรู้วิธีสร้างไฮเปอร์ลิงก์ผ่านตัวแปรบางตัวและใช้ POST (เหมือนรูปแบบ) ซึ่งต่างจาก GET
คำตอบ:
คุณสร้างแบบฟอร์มที่มีปัจจัยการผลิตที่ซ่อนที่เก็บค่าที่จะโพสต์ตั้งค่าการกระทำของแบบฟอร์มไปยัง URL ปลายทางและวิธีการแบบฟอร์มเพื่อโพสต์ จากนั้นเมื่อคลิกลิงก์ของคุณให้เรียกใช้ฟังก์ชัน JS ที่ส่งแบบฟอร์ม
ดูที่นี่สำหรับตัวอย่าง ตัวอย่างนี้ใช้จาวาสคริปต์แท้โดยไม่มี jQuery คุณสามารถเลือกได้หากคุณไม่ต้องการติดตั้งอะไรมากกว่าที่คุณมีอยู่แล้ว
<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 ที่นี่ แต่สามารถทำได้ด้วย apis พื้นเมือง (ยากขึ้นและยาวนานขึ้น)
<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 ใช้จาวาสคริปต์เพื่อจำลองการโพสต์ สิ่งนี้ทำได้ 2 อย่าง: โพสต์ข้อมูลไปยังหน้าใหม่และเปิดในหน้าต่าง / แท็บใหม่
HTML
<form name='myForm' target="_blank" action='newpage.html' method='post'>
<input type="hidden" name="thisIsTheParameterName" value="testDataToBePosted"/>
</form>
JavaScript
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>(ตัวอย่างเช่น<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 ลงในหน้าเว็บให้ใช้ 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()
})
แทนที่จะใช้ 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>ตรวจสอบสิ่งนี้มันจะช่วยคุณ
$().redirect('test.php', {'a': 'value1', 'b': 'value2'});