Tutorial #28 del curso de JQuery, en este tutorial seguimos viendo ajax, utilizaremos el motodo POST para el envío de datos hacia nuestro servidor php, además veremos como utilizar las herramientas que nos provee nuestro navegador y como esta herramienta puede resultar útil al momento de detectar errores y poder solucionarlo rapidamente.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ajax sumar dos números</title>
</head>
<body>
<form id="suma">
<input type="text" name="num_a" id="num1">
<input type="text" name="num_b" id="num2">
<button type="button" id="enviar">Enviar</button>
</form>
<br>
<div id="resultado"></div>
<script src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#enviar').click(function(event) {
var numeros = $('#suma').serialize();
$.post('sumar.php',numeros,function(datos){
$('#resultado').text(datos);
});
});
});
</script>
</body>
</html>Código php:
<?php $a = $_POST['num_a']; $b = $_POST['num_b']; echo $a+$b;