How to convert a GET request to POST

Question

I don't know if it is possible or not. I referred some site, but I didn't get exact answer.

I am using 
<a href="xyz?id=4"> click </a>

When I send this request to server in the response page easily I can see "id=4" in address bar, obviously which is not secure, But in post request we cant see this.

So can we convert a get request to post or ant other way is there to hide this from address bar.

Thanks in advance.

Answer 1

Firstly, to convert GET to POST, simply change the link to a form:

<form id="myForm" action="xyz" method="post">
  <input type"hidden" name="id" value="4"/>
</form>

This form will not be visible and you can easily auto-submit it using JavaScript in your link:

<a href="javascript:void document.getElementById('myForm').submit();"> click </a>

Secondly and more importantly, both GET and POST are equally not secure over HTTP. To secure them, use HTTPS and they will be both equally secure, so no need to change if GET is working for you.

Answer 2

<a href="#" onclick="postForm()"> click </a>

Dynamically create a from and post it.

function postForm() {
var form = $('<form method="POST" action="xyz"></form>');
$(document.body).append(form);
form.append('<input type="hidden" name="id" value="4"/>');
form.submit();
}

As Racil suggested in comments, you can also do the following

<a href="#" id="postLink"> click </a>

and then

$('#postLink').click(function(e){
   e.preventDefault();
   //create form and post
});

Answer 3

Call a java script function on onclick which will make the form submission using post method or you can use ajax call to post the data and get your desired results.Use id as a parameter in function.

<a href="#" onclick="postData(4)">

/// Javascript function for ajax call
function postData(id){
  var param = { "Id": id};
  $.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    url: "xyz.aspx",
    data: JSON.stringify(param),
    success: function (data) {
         /// Recive data here or do your stuff here
    }
}

Make a form having single input type hidden and onclick set value of that input type hidden element and submit form using jquery.

<form id="target" action="destination.html">
   <input type="hidden" id="hiddenValue">
</form>

/// Javascript function for setting value of hidden element and form submission using jquery
    function postData(id){
       $("#hiddenValue").val(id);
       $("#target").submit();
    }

Hopefully this will solve your problem.