标记向 showMessage.jsp 提交 POST 表单?" /> 标记向 showMessage.jsp 提交 POST 表单?"> 标记向 showMessage.jsp 提交 POST 表单?" />
How can I submit a POST form to showMessage.jsp
using just the <a href="...">
tag?
<form action="showMessage.jsp" method="post">
<a href="showMessage.jsp"><%=n%></a>
<input type="hidden" name="mess" value=<%=n%>/>
</form>
No JavaScript needed if you use a button instead:
<form action="your_url" method="post">
<button type="submit" name="your_name" value="your_value" class="btn-link">Go</button>
</form>
You can style a button to look like a link, for example:
.btn-link {
border: none;
outline: none;
background: none;
cursor: pointer;
color: #0000EE;
padding: 0;
text-decoration: underline;
font-family: inherit;
font-size: inherit;
}
You need to use javascript for this.
<form id="form1" action="showMessage.jsp" method="post">
<a href="javascript:;" onclick="document.getElementById('form1').submit();"><%=n%></a>
<input type="hidden" name="mess" value=<%=n%>/>
</form>
You have to use Javascript submit
function on your form
object. Take a look in other functions.
<form action="showMessage.jsp" method="post">
<a href="javascript:;" onclick="parentNode.submit();"><%=n%></a>
<input type="hidden" name="mess" value=<%=n%>/>
</form>
In case you use MVC to accomplish it - you will have to do something like this
<form action="/ControllerName/ActionName" method="post">
<a href="javascript:;" onclick="parentNode.submit();"><%=n%></a>
<input type="hidden" name="mess" value=<%=n%>/>
</form>
I just went through some examples here and did not see the MVC one figured it won't hurt to post it.
Then on your Action in the Controller I would just put <HTTPPost>
On the top of it. I believe if you don't have <HTTPGET>
on the top of it it would still work but explicitly putting it there feels a bit safer.
There really seems no way for fooling the <a href= ..
into a POST method. However, given that you have access to CSS of a page, this can be substituted by using a form instead.
Unfortunately, the obvious way of just styling the button in CSS as an anchor tag, is not cross-browser compatible, since different browsers treat <button value= ...
differently.
Incorrect:
<form action='actbusy.php' method='post'>
<button type='submit' name='parameter' value='One'>Two</button>
</form>
The above example will be showing 'Two' and transmit 'parameter:One' in FireFox, while it will show 'One' and transmit also 'parameter:One' in IE8.
The way around is to use hidden input field(s) for delivering data and the button just for submitting it.
<form action='actbusy.php' method='post'>
<input class=hidden name='parameter' value='blaah'>
<button type='submit' name='delete' value='Delete'>Delete</button>
</form>
Note, that this method has a side effect that besides 'parameter:blaah' it will also deliver 'delete:Delete' as surplus parameters in POST.
You want to keep for a button the value attribute and button label between tags both the same ('Delete' on this case), since (as stated above) some browsers will display one and some display another as a button label.
<button value="Bad">Good</button>
in IE7 and it displays "Good".
I use a jQuery script to create "shadow" forms for my POSTable links.
Instead of <a href="/some/action?foo=bar">
, I write <a data-post="/some/action" data-var-foo="bar" href="#do_action_foo_bar">
. The script makes a hidden form with hidden inputs, and submits it when the link is clicked.
$("a[data-post]") .each(function() { let href = $(this).data("post"); if (!href) return; let $form = $("
").attr({ method:"POST",action:href }).css("display","none") let data = $(this).data() for (let dat in data) { if (dat.startsWith("postVar")) { let varname = dat.substring(7).toLowerCase() // postVarId -> id let varval = data[dat] $form.append($("").attr({ type:"hidden",name:varname,value:varval })) } } $("body").append($form) $(this).data("postform",$form) }) .click(function(ev) { ev.preventDefault() if ($(this).data("postform")) $(this).data("postform").submit(); else console.error("No .postform set in ") }) click me
A good method for overriding the http functions, if you are using express/node.js, is to use the npm package method-override. Method-override example.
Success story sharing
a
tag.