jueves, 17 de septiembre de 2015

Enviar datos con Jquery Ajax a PHP

REQUISITOS

1.- Framework CDN Jquery (jquery CDN).
3.- Framework CDN CSS Bootstrap (bootstrapCDN).

EMPEZAR

1.- Creamos "Index.php"


<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 <title></title>
 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
 <script>
  var parametros = {
           "titulo"     : 'StarkCode',
           "descripcion": 'Mejorando la web del futuro.',
        };
  $.ajax({
            type:"POST",
            url:"dato.php",
            data:parametros,
            beforeSend: function () {
                $("#resultado").html('Procesando, Espere por favor...');                    
            },
            success:function(response)
            {
             $("#resultado").html(response);   
            }
        });
 </script>
</head>
<body>
<br>
<div class="container">
 <div class="row">
  <div id="resultado" class="alert alert-success col-md-offset-4 col-md-4"></div>
 </div>
</div>
</body>
</html>

2.- Creamos "dato.php"
<?php 
$titulo    = $_POST['titulo'];
$descripcion  = $_POST['descripcion'];

echo '<b>Titulo:</b> '.$titulo.'<br>'.'<b>descripcion:</b> '.$descripcion;
?>

5.- Abrir el archivo "index.php" en un navegador.
4.- Debería quedar así



6.- Descargar el Archivo de ejemplo (Enviar datos con Jquery ajax y php.rar) para probarlo.
7.- Listo!!.

0 comentarios:

Publicar un comentario

 
;