jQuery | serializeArray() con ejemplos

serializeArray() es un método incorporado en jQuery que se utiliza para crear una array de objetos de JavaScript que está lista para codificarse como una string JSON. Opera en una colección jQuery de formularios y/o controles de formulario. Los controles pueden ser de varios tipos. La string JSON es un texto y puede convertir cualquier objeto JavaScript en JSON y enviar JSON al servidor.
Sintaxis:

$(selector).serializeArray()

Parámetro: No acepta ningún parámetro.

Valor devuelto: Devuelve una string de objetos.

código jQuery para mostrar el funcionamiento del método serializeArray():

<html>
   
<head>
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                var x = $("form").serializeArray();
                $.each(x, function(i, field) {
                    $("#d").append(field.name + ":" + field.value + ":::");
                });
            });
        });
    </script>
    <style>
        #d1 {
            width: 300px;
            height: 100px;
            padding: 20px;
            border: 2px solid green;
            margin-bottom: 10px;
        }
    </style>
</head>
   
<body>
    <div id="d1">
        <form action="">
            Site name:
            <input type="text" name="SiteName" value="GeeksforGeeks">
            <br>
            <br> Contributor name:
            <input type="text" name="ContributorName" value="KundanJha">
            <br>
        </form>
        <!-- click on this button -->
        <button>Click here!</button>
    </div>
    <div id="d"></div>
   
</body>
   
</html>

Salida:
antes de hacer clic en el botón «¡Haga clic aquí!» botón-

Después de hacer clic en el botón «¡Haga clic aquí!» botón-

Publicación traducida automáticamente

Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *