In programming, with some situations we can hardly get the current url parameter from the server side to pay the user, we can also use a solution using javascript to read the client side url and solve the problem. resolve this issue.

1. What is the path parameter?

If you have understood the GET and POST methods to communicate with the server (submit form), you will understand the meaning of the image you just took, I would like to explain it in a simple way as follows:

The parameters displayed on the URL are the parameters used in the GET method (GET method) (the parameters passed to interact with the server are not hidden and clearly displayed on the browser). For example in the above context, I am editing an article, 2 post and action parameters to identify which post I edit on the server, the server side will receive 2 parameters: post with id 5141 and action mine is edit, and handle the logic to return the updated interface.

2. javascript built-in objects to read current url and parameters

Javascript provides us with some built-in objects to read the current url in the browser

The object I want to talk about is location , inside the window. This object will help us get the current path string, input parameters, protocol or port.

You can refer to the details of window.location here:

https://www.w3schools.com/js/js_window_location.asp

This location object provides the solution so that we can get the current querystring in your browser, using the search property, consider the following code example:

 var queryString = window.location.search; console.log(queryString); // kết quả sẽ in ra trong ngữ cảnh hình ảnh ví dụ trên: ?post=5141&action=edit

However, for detailed analysis, we will need more than that, I will continue to go ahead and parse the above query string to get each parameter, by instantiating a new object that javascript provides. to parse the query string and return the parameter list as URLSearchParams

You can refer to the URLSearchParams object here:

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

We return to the example, the sample code is as follows:

 var queryString = window.location.search; var url_param = new URLSearchParams(queryString); console.log(url_param );

When printing to the console, javascript will return us a URLSearchParams object with the structure as shown below:

We can completely process data, get the values of this object from the functions already provided by the object. To get the parameters of this object, I will handle the following:

 var queryString = window.location.search; var url_param = new URLSearchParams(queryString); console.log(url_param.get('post') ); // kết quả sẽ trả ra 4151 là giá trị của tham số post trong ngữ cảnh trên

In addition, you can interact with this object based on the provided functions, which is too fast and dangerous!

If you have any questions or concerns, please comment here, we will respond to you with instructions. Good luck.