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: