sembra troppo grande per il mio scala
Che in realtà dipende dal contesto e le esigenze funzionali. È piuttosto semplice e banale però. Sembra che siano "troppe informazioni" per te e che tu abbia effettivamente bisogno di imparare i concetti separati (HTTP, HTML, CSS, JS, Java, JSP, Servlet, Ajax, JSON, ecc.) singolarmente in modo che il un'immagine più grande (la somma di tutte quelle lingue/tecniche) diventa più ovvia. È possibile trovare this answer utile quindi.
In ogni caso, ecco come si potrebbe fare con un semplice JSP/Servlet senza Ajax:
calculator.jsp:
<form id="calculator" action="calculator" method="post">
<p>
<input name="left">
<input name="right">
<input type="submit" value="add">
</p>
<p>Result: <span id="result">${sum}</span></p>
</form>
con CalculatorServlet che viene mappato su un url-pattern di /calculator:
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Integer left = Integer.valueOf(request.getParameter("left"));
Integer right = Integer.valueOf(request.getParameter("right"));
Integer sum = left + right;
request.setAttribute("sum", sum); // It'll be available as ${sum}.
request.getRequestDispatcher("calculator.jsp").forward(request, response); // Redisplay JSP.
}
Fare Ajaxica Anche le cose da lavorare non sono così difficili. E 'una questione di includere le seguenti JS all'interno HTML del JSP <head> (si prega di scorrere verso destra per vedere i commenti di codice che spiega ciò che ogni singola riga fa):
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() { // When the HTML DOM is ready loading, then execute the following function...
$('#calculator').submit(function() { // Locate HTML element with ID "calculator" and execute the following function on its "submit" event...
$form = $(this); // Wrap the form in a jQuery object first (so that special functions are available).
$.post($form.attr('action'), $form.serialize(), function(responseText) { // Execute Ajax POST request on URL as set in <form action> with all input values of the form as parameters and execute the following function with Ajax response text...
$('#result').text(responseText); // Locate HTML element with ID "result" and set its text content with responseText.
});
return false; // Prevent execution of the synchronous (default) submit action of the form.
});
});
</script>
e cambiando le ultime due righe di doPost come segue:
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(String.valueOf(sum));
si può anche fare un controllo condizionale in modo che il modulo lavora ancora per il caso che l'utente ha disabilitato JS:
if ("XMLHttpRequest".equals(request.getHeader("X-Requested-With"))) {
// Ajax request.
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(String.valueOf(sum));
} else {
// Normal request.
request.setAttribute("sum", sum);
request.getRequestDispatcher("calculator.jsp").forward(request, response);
}
È possibile creare senza alcun servlet. Solo con html + javascript. Un altro modo: effettuare calcoli sul server. Qui è necessario l'Ajax per evitare il ricaricamento della pagina. Con il modo in cui preferisci e dove hai problemi? –