Dado un objeto jQuery y la tarea es serializar el elemento del objeto en la string de consulta usando JQuery.
Enfoque 1:
- Declare un objeto y guárdelo en la variable.
- Utilice el método JSON.stringify() para convertir el objeto en strings y mostrar el contenido de la string.
- Utilice el método param() para serializar el elemento del objeto como string de consulta y almacenarlo en una variable.
- Muestre el objeto de serialización como string de consulta.
Ejemplo: este ejemplo usa el método param() para serializar el objeto.
<!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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2:
- Declare un objeto y guárdelo en la variable.
- Utilice el método JSON.stringify() para convertir el objeto en strings y mostrar el contenido de la string.
- Haga clic en el botón para llamar a la función convert() que convierte el objeto serializado en una string de consulta.
- La función convert() utiliza el método keys() y map() para convertir el objeto serializado en una string de consulta.
Ejemplo: este ejemplo crea una función que toma cada clave, par de valores y los agrega como una string para obtener la string de consulta keys() y el método map() .
<!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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA