如何使用 jQuery 将对象序列化为查询字符串？

给定一个 jQuery 对象，任务是使用 JQuery 将对象元素序列化为查询字符串。

方法一：

• 声明一个对象并将其存储到变量中。
• 使用 JSON.stringify() 方法将对象转换为字符串并显示字符串内容。
• 使用 param() 方法将对象元素序列化为查询字符串并将其存储到变量中。
• 将序列化对象显示为查询字符串。

示例：本示例使用param() 方法来序列化对象。

  

    
        JQuery | Serialize object to query string.
    
    
        #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;
        }
    



  

     
            GeeksforGeeks 
        
    
    
    
    
    
        click here
    
    
    
    
        $('#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);
        });
    

  

输出：

• 点击按钮前：
  
• 点击按钮后：
  

方法二：

• 声明一个对象并将其存储到变量中。
• 使用 JSON.stringify() 方法将对象转换为字符串并显示字符串内容。
• 单击按钮调用 convert()函数，将序列化对象转换为查询字符串。
• convert()函数使用 keys() 和 map() 方法将序列化对象转换为查询字符串。

示例：此示例创建一个函数，该函数将每个键、值对并将它们作为字符串附加以获取查询字符串keys()和map() 方法。

  

    
        JQuery | Serialize object to query string.
    
    
        #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;
        }
    



  

     
            GeeksforGeeks 
        
    
    
    
    
    
        click here
    
    
    
    
        $('#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);
        });
    

  

输出：

• 点击按钮前：
  
• 点击按钮后：