<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script >
var webresource = "<%= getServletContext().getContextPath()%>/webresources";
var calculadoraRest = webresource + "/calculadora";
var factorialPath = calculadoraRest + "/factorial";
function init() {
$("#factorialBtn").click(function() { //definiendo el evento click del boton #factorialBtn
var vBase = $("#f_base").val(); //obteniendo el valor del input #f_base
$.ajax(factorialPath,
{ data: {base: vBase},
success: function(resp) { //llamando al webservice con el parametro base igual a la variable base
$("#f_resultado").text("Resultado:" + resp); //... muestra el resultado obtenido en resp en el div
}
});
});
}
</script>
</head>
<body>
<h1>Calculadora</h1>
<form>
<fieldset>
<legend>Factorial</legend>
<label for="f_base">Base</label><input id="f_base" name="base" /><br/>
<button id="factorialBtn" type="button">Calcular factorial</button>
<div id="f_resultado"></div>
</fieldset>
</form>
</body>
<script type="text/javascript">
$(document).ready(init)
</script>
</html>