<!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);
