Updated April 17, 2023
Introduction to jQuery param()
In jQuery, param() is a function defined as the Ajax method, which is used for representing the continuous string of an object or an array; while making the Ajax request, the URL can use these serialized or continuous string values for calling the request. In general, we can define-param() function as a function for converting to the continuous string from the provided elements internally and if in case any plain object is passed which would properties like name or value that contains the input elements along with these properties and this function has the options to disable globally by setting the traditional value to true.
Working of the jQuery param() with Examples
In this article, we will see the param() function of jQuery, which is an Ajax method for making the Ajax request; we need to use these serialized string obtained after applying this function to the elements internally, which contain the return value as a continuous string of an array or object. In jQuery, the param() function is used by the URL for making the Ajax request by converting the elements into the continuous string as the output of this param() function, or we can say this function returns the serialized string representation of an array or plain object.
In general, this function is used when any button is created and is first time clicked, which would create a continuous string representation of an object or an array which would, in turn, results in a string that is sent to the server as part of the Ajax request.
Let us see syntax and examples of how to use this function:
Syntax:
$.param(object, traditional_style)Parameters:
- Object: This parameter is used to specify the string or object that needs to be serialized. This parameter needs to be specified compulsory.
- Traditional: This parameter is used to specify the serialization styles of param() function that is required to use or not the traditional shallow style, which is a Boolean value to be specified, and this parameter is optional.
This function returns the converted serialized string representation of an array or an object that is passed to this function.
Let us consider an example of how to declare the param() function.
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Educba Training Institute
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body style="text-align:left";>
<h1 style = "background-color:red" >
EDUCBA Jquery
</h1>
<h2 style = "color:blue">Demonstration of jQuery param() function</h2>
<button>Click me</button>
<div>
<p> Hello welcome to Educba Instituion </p>
</div>
<!-- Script using param() method -->
<script>
$(document).ready(function() {
jqpmobj = new Object();
jqpmobj.Fullword = "EDUCBA ";
jqpmobj.Firstword = "Jquery ";
jqpmobj.Secondword = "Param() ";
jqpmobj.Thirdword = "Function ";
jqpmobj.Wordcolor = "Blue";
$("button").click(function(){
$("div").text($.param(jqpmobj));
});
});
</script>
</body>
</html>Output:
After clicking on the “click me” button of the above screenshot, we get the below-serialized string as shown in the above screenshot.
In the above program, we can see we have written HTML code with script source pointing to the jQuery file inside the <head> tag, and to write the jquery code in the <body> tag, we have to write it in <script> tag we first start with “$” symbol to write jquery statements we have written the $ document.ready() which runs only when the DOM is ready for executing the javascript. Then we are writing a function in which we first create an object using the “Object()” function and then invoking the words using this object as a reference to these words such as “Fullword”, “Firstword”, “Seconword” and “Thirdword” along with “Wordcolor” these all will specify the words that need to be displayed or represented as a serialized string in the output and it will be printed as shown in the above screenshot.
In the output, we can see each word is separated by “%20&” because we are specifying both for Fullwords and single word spaces are replaced by this in the above output. So in the above code, we have passed the object “jqpmobj”, so we must specify any name or value properties, and here it is “Fullword” or “Firstword”, etc. So this param() function when objects are passed these names or values parameters are added to the URL string, which is dynamically modified with the history API.
Now we will see an example with creating three objects and to display the decoded object, which is done using decodeURIComponent() in the below code.
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<title> Educba Institution </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head>
<body>
<h1> JQuery concepts</h1>
<h2> Demonstration of using the jQuery param(). </h2>
<p>Hello! Welcome to Educba </p>
<button> Click me</button>
<p id = "p1"> Javascript </p>
<p id = "p2"> JQuery </p>
<p id = "p3"> Php </p>
<script>
$(document).ready(function() {
var com_obj1= new Object ({
p: [ 7, 1, 6 ]
});
var com_obj2= new Object ({
p: { q: 7, r: 1, s: 6}, t: [ 3, 9]
});
var com_obj3 = new Object({
p: {u: 4, v: 4}, w:[2, 8]
});
$("button").click(function() {
var x = decodeURIComponent( $.param(com_obj1));
$("#p1").text(x);
var y = decodeURIComponent( $.param(com_obj2));
$("#p2").text(y);
var z = decodeURIComponent( $.param(com_obj3));
$("#p3").text(z);
});
});
</script>
</body>
</html>Output:
After clicking on the “click me” button in the above screenshot to display the decoded code of the 3 objects “, Javascript”, “Jquery”, and “Php”, and it is displayed as shown in the below screenshot.
In the above code, we can see we are using the decoseURIComponent(), which is used for decoding the objects so which is a bit complex so; in the above code also we can see we are creating 3 objects and the decoded codes are as shown in the above screenshot of the output.
Conclusion
In this article, we conclude that the jQuery provides a function called param(), which is used for representing the array of objects in a serialized way. In this article, we saw how to declare and use the param() function with syntax and examples. In this article, we also saw an example with the simple creation of the object, and then in another example, we also saw the creation of complex objects and decoding the objects using param() and decodeURIComponent() function.
Recommended Articles
This is a guide to jQuery param(). Here we discuss the introduction and working of the jQuery param() with examples, respectively. You may also have a look at the following articles to learn more –
