Etiqueta: serialize

¿Cómo utilizar serialize de jquery en un elemento que no es form? #js #jquery

Para utilizar serialize() de jquery en un conjunto de elementos que estén dentro de un padre que no sea un formulario puede ser posible, para ello te muestro un ejemplo suponiendo que el padre se llama «PadreQueNoEsForm»:


var parametros=$("#PadreQueNoEsForm :input").serialize();

Curso de MVC API .Net C#, Seguridad, Regresar datos en forma de json, #3

En este tercer video, te enseño como puedes poner seguridad a tus métodos, para que se verifique el token que se crea al autentificarse el usuario.
También veremos como regresar datos serializados en forma de json.

¿Cómo utilizar la función serialize() de jquery en controles que no están dentro de un form? #js #jquery

La función serialize de jquery nos sirve para serializar los elementos que se encuentra dentro de un formulario en específico, es decir, al aplicar la función obtenemos los elementos preparados para una petición al backend (campo1=1&campo2=2…).

Para que podamos hacer esta funcionalidad pero en elementos que no están dentro de un form sino dentro de un div por ejemplo lo podemos hacer de la siguiente manera:


<div id="UnDiv">
   <input type="text" name="campo1">
   <select name="campo2">
        <option value="1">1</option>
        <option value="2">2</option>
   </select>
   <input type="text" name="campo3">
</div>



//selector de jquery :input
var parametros = $('#UnDiv :input').serialize();

Recuerda poner el atributo name en los elementos a serializar y también otro tip, el selector «:input» selecciona todos los elementos de formulario, tanto input, select, textarea etc.

¿Cómo hacer una petición ajax por medio de submit? #jquery #ejemplos

Algunas veces nuestras peticiones de formulario son pesadas (cargar archivos por ejemplo) y esto puede ocasionar que el usuario se estrese o siga presionando botones, para ello yo en estos casos recurro a realizar una petición ajax remplazando el submit del form (a la vez bloqueo la pantalla para que no estén haciendo peticiones a lo bestia, pueden utilizar algo como esto: [bloquear la pantalla con un div]).
Para ello podemos ayudarnos de la función serialize() de jquery, con la cual nos regresa la cadena de parámetros que están en nuestro form (valor1=1&valor2=2&valor3=3…).
Tenemos que tener cuidado en poner el return false al final, ya que con eso evitamos que se continúe con el submit común.
El siguiente ejemplo muestra fácilmente como podemos realizar esa petición (leer los comentarios):

Código HTML

    <form id="miForm" action="/peticion.php">
    	<input name="cajaTexto" type="value" value="pato" />
        <input type="submit" value="Enviar" />
    </form>

Código Jquery

//selector sobre el form seguido de la función submit
$("#miForm").submit(function(){
		//de esta manera remplazamos

		//ahora obtendremos los atributos que necesitaremos
		url=$(this).prop("action")
		//la función serialize nos regresa los input, es importante ponerles name
		parametros=$(this).serialize()

		//aqui utilizamos la petición, en este caso post
		$.post(url,parametros,function(data){
			//aqui es cuando ya se hizo nuestra petición
			//regularmente yo regreso 1 para mostrar exito
				if(data=="1"){
					alert("exito")
				}else{
					//si no regreso el 1, regreso el error y asi lo muestro
					alert(data)
				}
		})

		//ESTO ES MUY IMPORTANTE, YA QUE SI NO SE PONE SE REALIZA LAS DOS PETICIONES
		//TANTO AJAX COMO LA PETICIÓN NORMAL DE FORMULARIO
		//REFRESCANDO TODA LA PAGINA.
		return false;

})

De esta manera podremos remplazar la petición submit normal, y hacer una petición ajax, que es mas formal y elegante.

Nota: el archivo peticion.php del action del form, es un proceso x en el cual se realiza una operación ya sea inserción, validación, etc. Y nos regresa en caso de éxito un «1», sino el error.