Ir al contenido principal

Destacado

Desarrollo web Bootcamp

  Introducción a la Programación La programación es el proceso de diseñar y escribir instrucciones que las computadoras entienden para realizar tareas específicas. Estas instrucciones se conocen como código , y permiten a los desarrolladores crear aplicaciones, sitios web, juegos y mucho más. Lenguajes de Programación Comunes en el Desarrollo Web En el desarrollo web, los lenguajes más utilizados incluyen: HTML : Define la estructura del contenido en una página web. CSS : Estiliza y da diseño a los elementos de HTML. JavaScript : Agrega interactividad y funcionalidades dinámicas a las páginas web.      PHP y Python : Son lenguajes de servidor para manejar la lógica y los datos. SQL : Sirve para gestionar bases de datos. Sintaxis Básica La sintaxis es un conjunto de reglas que determina cómo escribir código en un lenguaje específico. Es fundamental para que el programa funcione correctamente. Por ejemplo: javascript let mensaje = "¡Hola Mundo!" ; console . log (mens...
Publicar un comentario
Leer más

Registro de Usuario vía ajax y php(mandando datos al servidor)

Registro de Usuario vía ajax y php

(mandando datos al servidor)




En esta ocasión les comparto una manera sencilla de enviar datos de mi vista html al server mediante ajax y recibirlos con php.

1.-Primeramente voy a crear un formulario con html 




2.-Integramos las librerías de boostrap para darle diseño

<html>


<head>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


</head>


<body>


<div class="row">


<div class="col-md-4"></div>


<div class="col-md-4">


<form action="">

<h3>REGISTRO DE USUARIO</h3>

<label for="">NOMBRE</label>

<input type="text" id="txtnombre"  class="form-control">

<label for="">APELLIDO PATERNO</label>

<input type="text" id="txtapellidop" class="form-control">

<label for="">APELLIDO MATERNO</label>

<input type="text" id="txtapellidom" class="form-control">

<label for="">TELÉFONO</label>

<input type="text" id="txttelefono" class="form-control">

<label for="">CORREO</label>

<input type="text" id="txtcorreo" class="form-control">


<button type="button" class="btn btn-primary" style="margin-top: 1em;float: right;" onclick="Enviardatos()" >ENVIAR DATOS</button>


</form>


</div>


<div class="col-md-4"></div>


</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>


<script src="envio.js"></script>


</body>

</html>


3.-Agregamos un archivo llamado envio.js el cual tiene la función de enviar los datos por via ajax .Este se encarga de tomar los datos del formulario .

function Enviardatos() {

var nombre=$("#txtnombre").val();

var apellidop=$("#txtapellidop").val();

var apellidom=$("#txtapellidom").val();

var telefono=$("#txttelefono").val();

var correo=$("#txtcorreo").val();


var datos="nombre="+nombre+"&apellidop="+apellidop+"&apellidom="+apellidom+"&telefono="+telefono+"&correo="+correo;


$.ajax({

method: "POST",

url: "formulario.php",

data: datos,

dataType:'json'

})

.done(function(msg) {

var informacion=msg.informacion;

alert( "SE A REGISTRADO: " + informacion.nombre+' '+informacion.apellidop);

});

}

4.- Recogemos todos los datos, y los enviamos en forma de parámetros a un archivo llamado formulario.php

5.- Recibimos en nuestro archivo los paramétros 


<?php 


$nombre=$_POST['nombre'];

$apellidop=$_POST['apellidop'];

$apellidom=$_POST['apellidom'];

$telefono=$_POST['telefono'];

$correo=$_POST['correo'];




$informacion = array('nombre' =>$nombre ,'apellidop'=>$apellidop);


$array['informacion']=$informacion;


echo json_encode($array);



 ?>


6.-De esta manera podemos hacer inserciones,actualizaciones a la base si así lo deseamos .

7.-Siganme en el canal



https://www.youtube.com/channel/UCGMmnjUCWvLSYgLjUun_rrw?view_as=subscriber

Comentarios

Publicar un comentario

Hola que tal,dime tu opinión

Entradas populares