Send POST data when clicking on a link, differences between GET and POST methods

13.07.18 IT / Html 10701

When developing a site, usually there is a need to send certain data to the server, today the most popular request methods for sending such data are GET and POST methods . There are other methods, such as PUT and DELETE, but they are not widely used.

The easiest method to use is of course GET. It is used for most requests for site pages, for example, when viewed through a browser. When a user types an address in a line or clicks on a link on a site, the GET method is most likely used. This method can be used to send small data such as lines of text. Disadvantage - all data is visible in the browser bar.

The second most popular is the POST method, it differs from GET it has advanced data sending capabilities. Often used to upload a file or retrieve data from a completed web form. The data is sent invisibly to the user. Unlike the GET method, POST is mainly used to send data to the server, while GET is more often used to receive information from the server. The POST method should be used to send sensitive data.

Having briefly reviewed the differences between the GET and POST methods, let's move on to solving the problem of sending data using the POST method when clicking on a link . Such a need can often arise when creating various functionality on a project under development.

When clicking on a link created by the a tag, there is no way to change the request type, as it can be done when submitting data from a form created by the form tag. Indeed, in the case of a form, you can specify the method attribute there, while the a tag does not have such an attribute. Therefore, when sending data when clicking on a link, all data will be visible in the browser line, in the form of parameters, which undoubtedly spoils the look of the web application and cancels in some way clean CNC links.

To solve the problem of sending POST method data, you can use a regular form with a input type = submit button. This button can be visually made to look like a regular link by using CSS styles correctly. The problem is solved, the form looks like a regular link, and the data is sent invisibly, using the POST method. This approach can often be used on different pages to avoid generating additional URLs.

Below is an example:

  & lt; style>
.form-test {
font: 14px Arial;
}
.form-test input {
font: 14px Arial;
border: none;
padding: 0;
background: #fff;
color: # 00f;
}
& lt; / style>
& lt; form class = "form-test" method = "post">
& lt; input type = "hidden" value = "data">
Example & lt; input type = "submit" value = "links">
& lt; / form>
 

In a browser, this code will look like this:

As you can see, this is a simple solution for sending data using the POST method. In this way, you can send various data: files, text, serialized data. True, to send a file by clicking on a link, you first need to have the user select this file on his PC - this can also be done by placing the input type = file field separately and linking it to the form with the form attribute this tag has input . Visually, it will look as if the elements are not related to each other, but the desired result will be achieved.

As for the serialized data, you can pre-prepare it using special language functions, for example, in PHP you can use json_encode and serialize . After that, this data is simply inserted into the hidden form field hidden . In this way, for example, you can send a PHP array using the POST method to another page.

In this article, we saw that the GET and POST methods have differences and similarities. Also, examples were shown of how almost any data can be sent using the POST method when clicking on a link . This can often come in handy when developing various sites and web applications.