How to hide the query string in the URL after a GET Request in JavaScript

Read Later

Select Discard

Information

Views: 2431 jQuery By Kutluhan Aktar

Tags

jQuery AJAX Form split Query Function

Share

• Share
• Share
• Share
• Share
• Share

Definition

In this tutorial, I will discuss how to remove the query string sent in the URL of a Get request in JavaScript.

We will use AJAX to make a GET request to send information without displaying the query string in the URL.

Syntax⁽¹⁾:

Note that the query string (name/value pairs) is sent in the URL of a GET request:

/test/demo_form.php?name1=value1&name2=value2

• GET is used to request data from a specified resource.
• GET is one of the most common HTTP methods.
• GET requests can be cached
• GET requests remain in the browser history
• GET requests can be bookmarked
• GET requests should never be used when dealing with sensitive data
• GET requests have length restrictions
• GET requests are only used to request data (not modify)

Code

📄 In jQuery, select the form elements.

📄 If the submit button is clicked, execute the function to send a Get request with the given variables by using AJAX.

📄 If the request is successful, return the page without displaying the query string (?) in the URL by removing it with the split method.

📄 window.location = window.location.href.split('?')[0]

-------------- JavaScript --------------

$("form").on("click", ".submit", function() {	
	$.ajax({
		url: '?name1=' + variable_1 + '&name2=' + variable_2,
		type: 'GET',
		success: () => {window.location = window.location.href.split('?')[0]}
	});
});

References

⁽¹⁾ https://www.w3schools.com/tags/ref_httpmethods.asp