Ajax con post y objetos

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     
    </head>
    <body>
        Nombre:<input type="text" id="first_name"><br/>
        Apellidos:<input type="text" id="last_name"><br/>
        <button id="ajax">Pulsa aquí para probar el ajax</button>
        <div id="resultado"></div>
        <script>
        $(function(){
           console.log("Página cargada"); 
           $('#ajax').click(function(){
               console.log("Pulsado");
               $.post("ejemplo_ajax_backend.php",
               {"first_name":$("#first_name").val(),
               "last_name":$("#last_name").val()},
               function(data){
                   console.log("resultado "+data);
                  var objeto=JSON.parse(data);
                  for(prop in objeto){
                      $('#resultado').append(prop + " - "+objeto[prop]+"<br/>");
                  }
               });
           });
        });
        </script>
    </body>
</html>

<?php

$first_name= filter_input(INPUT_POST, "first_name");
$last_name= filter_input(INPUT_POST, "last_name");

$res=["Nombre"=>$first_name,"Apellidos"=>$last_name];

echo json_encode($res);

Publicado por

Avatar del usuario

Juan Pablo Fuentes

Formador de programación y bases de datos