09.- Ajax con Jquery🌇 de 0 a 100 [ Ajax envio de datos via post ]

Video: https://youtu.be/NMsDDVnNwC8
programadornovato · Jul 21, 2019 · 1ce13b2 · 1ce13b2
1 parent 8bbda95
commit 1ce13b2
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 35 deletions.
diff --git a/convertir.php b/convertir.php
@@ -1,12 +1,8 @@
 <?php
 header('Access-Control-Allow-Origin: *');
-if( $_REQUEST['operacion']=='may' ){
-    echo strtoupper( $_REQUEST['texto']);
-}
-else if( $_REQUEST['operacion']=='min' ){
-    echo strtolower( $_REQUEST['texto']);
-}
-else{
-    echo $_REQUEST['texto'];
+if( isset($_POST['nombre']) && isset($_POST['puesto']) ){
+    echo "Nombre:".$_POST['nombre']." <br> Puesto:".$_POST['puesto'];
 }
+
+
 ?>
diff --git a/index.html b/index.html
@@ -1,33 +1,35 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   <title>ajax</title>
 </head>
+
 <body>
-
-  <div class="container mt-3">
 
-    <button type="button" class="btn btn-primary" id="convertir" >Convertir</button>
-    <div class="form-group">
-      <input type="text" class="form-control" id="opracion" placeholder="opracion" value="may" >
-      <input type="text" class="form-control" id="texto" placeholder="texto">
-    </div>
-    <div class="alert alert-primary" role="alert">
-      <strong id="datosEmpleado">Datos empleado</strong>
-      <ul id="listaEmpleados">
-        <li>Datos empleado</li>
-      </ul>
-    </div>
+  <div class="container mt-3">
+    <form>
+      <div class="form-group">
+        <label for="">Nombre</label>
+        <input type="text" class="form-control" id="nombre">
+        <label for="">Puesto</label>
+        <input type="text" class="form-control" id="puesto">
+        <button type="submit" class="btn btn-primary">Enviar</button>
+      </div>
+      <div class="alert alert-primary" role="alert">
+        <strong id="res"></strong>
+      </div>
+    </form>
   </div>
 
-    <script
-  src="https://code.jquery.com/jquery-3.4.1.min.js"
-  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
-  crossorigin="anonymous"></script>
+  <script src="https://code.jquery.com/jquery-3.4.1.min.js"
+    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
   <script src="javascript.js"></script>
 </body>
+
 </html>
diff --git a/javascript.js b/javascript.js
@@ -1,13 +1,13 @@
 $(document).ready(function () {
-    $('#convertir').click(function (e) { 
+    $('form').submit(function (e) { 
         e.preventDefault();
-        let opracion=$('#opracion').val();
-        let texto=$('#texto').val();
-        $.get("http://localhost/ajax/convertir.php",
-        {'operacion':opracion,'texto':texto},
-        function(data){
-            console.log(data);
-            $('#listaEmpleados').html(data);
-        });
+        let nombre=$('#nombre').val();
+        let puesto=$('#puesto').val();
+        $.post("http://localhost/ajax/convertir.php", 
+        {'nombre':nombre,'puesto':puesto},
+            function (data, textStatus, jqXHR) {
+                $('#res').html(data);
+            }
+        );
     });
 });