Exercici ajax post

De wikiserver
Dreceres ràpides: navegació, cerca
<html>
    <head>
        <title>Ejemplo sencillo de AJAX</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                function realizaProceso() {

                    var parametros = {
                        "valorCaja1": $('#valor1').val(),
                        "valorCaja2": $('#valor2').val()
                    };

                    $.ajax({
                        data: parametros,
                        url: 'tabla.php',
                        type: 'POST',
                        async: false,
                        beforeSend: function () {
                            $("#resultado").html("Procesando, espere por favor...");
                        },
                        success: function (response) {
                            $("#resultado").html(response);
                        }


                    });
                }
                $("#bot").click(realizaProceso);
            });

        </script>
    </head>
    <body>
        <input type="text" name="caja_texto" id="valor1" value="0"/>
        <input type="text" name="caja_texto" id="valor2" value="0"/>
        <input id="bot" onclick="realizaProceso" type="button" value="Calcula"/>
        <br/>
        Resultado: <span id="resultado"></span>
    </body>
</html>


<?php

$resultado = $_POST['valorCaja1'] + $_POST['valorCaja2'];

echo $resultado;

?>