How to serialize an object to query string using jQuery ?
Given a jQuery object and the task is to serialize the object element into the query string using JQuery.
Approach 1:
- Declare an object and store it into the variable.
- Use JSON.stringify() method to convert the object into strings and display the string contents.
- Use param() method to serialize the object element as query string and store it into a variable.
- Display the serialize object as query string.
Example: This example uses the param() method to serialize the object.
<!DOCTYPE html><html> <head> <title> JQuery | Serialize object to query string. </title> <style> #GFG_UP { font-size: 17px; font-weight: bold; } #GFG_UP2 { font-size: 20px; font-weight: bold; color: green; } #GFG_DOWN { color: green; font-size: 24px; font-weight: bold; } button { margin-top: 20px; } </style></head><script src=</script> <body style="text-align:center;" id="body"> <h1 style="color:green;"> GeeksforGeeks </h1> <p id="GFG_UP"> </p> <p id="GFG_UP2"> </p> <button> click here </button> <p id="GFG_DOWN"> </p> <script> $('#GFG_UP') .text('Click the button to serialize the object to query string'); var data = { param1: 'val_1', param2: 'val_2', param3: 'val_3' }; $('#GFG_UP2').text(JSON.stringify(data)); $('button').on('click', function() { var result = $.param(data); $('#GFG_DOWN').text(result); }); </script></body> </html> |
Output:
- Before clicking the button:
- After clicking the button:
Approach 2:
- Declare an object and store it into the variable.
- Use JSON.stringify() method to convert the object into strings and display the string contents.
- Click on the button to call convert() function which convert the serialize object to query string.
- The convert() function uses keys() and map() method to convert the serialize object to query string.
Example: This example creates a function which is taking each key, value pair and appending them as a string to get the query string keys() and map() method.
<!DOCTYPE html><html> <head> <title> JQuery | Serialize object to query string. </title> <style> #GFG_UP { font-size: 17px; font-weight: bold; } #GFG_UP2 { font-size: 20px; font-weight: bold; color: green; } #GFG_DOWN { color: green; font-size: 24px; font-weight: bold; } button { margin-top: 20px; } </style></head><script src=</script> <body style="text-align:center;" id="body"> <h1 style="color:green;"> GeeksforGeeks </h1> <p id="GFG_UP"> </p> <p id="GFG_UP2"> </p> <button> click here </button> <p id="GFG_DOWN"> </p> <script> $('#GFG_UP') .text('Click the button to serialize the object to query string'); var data = { param1: 'val_1', param2: 'val_2', param3: 'val_3' }; $('#GFG_UP2').text(JSON.stringify(data)); function convert(json) { return '?' + Object.keys(json).map(function(key) { return encodeURIComponent(key) + '=' + encodeURIComponent(json[key]); }).join('&'); } $('button').on('click', function() { var result = convert(data); $('#GFG_DOWN').text(result); }); </script></body> </html> |
Output:
- Before clicking the button:
- After clicking the button:
.png)
