Tutorial #27 del curso de JQuery, en este tutorial nos adentramos a la utilización de AJAX (Asynchronous JavaScript And XML), esto nos permitira enviar y recibir datos desde un servidor podemos utilizar cualquier lenguaje del lado del servidor para este caso utilizaremos PHP así que recuerda tener instalado un servidor web con soporte php para el curos estoy utilizando xampp, puedes usar cualquier otro de tu agrado.
<!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>
<input type="text" id="num1">
<input type="text" 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 num1 = $('#num1').val();
var num2 = $('#num2').val();
$.post('sumar.php',{"num_a":num1,"num_b":num2},function(datos){
$('#resultado').text(datos);
});
});
});
</script>
</body>
</html>Código php
<?php $a = $_GET['num_a']; $b = $_GET['num_b']; echo $a+$b;