Calculatrice Simple avec JSP/Servlet et Ajax

C'est une sorte de continuation de mon question précédente, mais je pense qu'il mérite d'être sur son propre, en particulier en raison de la très détaillée de la réponse que j'ai obtenu.

Je voudrais créer une calculatrice en jsp. Il y aura deux zones de texte pour les chiffres et un bouton ajouter. Idéalement, je veux la réponse à apparaître dans la page sans la recharger, mais à partir de la réponse que j'ai eu, il semble trop grand pour mon échelle. Je pense que soit: 1) imprimer la réponse à une troisième zone de texte (est-ce possible?) ou en quelque sorte le chargement de la même page (avec le bouton ajouter, et tout et tout) avec la réponse (et être en mesure de saisir des numéros différents et ainsi de suite).

Pouvez-vous suggérer un bon moyen de faire cela?

Vous pouvez le créer sans servlets. Seulement avec html + javascript. Une autre façon de faire des calculs sur le serveur. Ici, vous avez besoin d'Ajax pour éviter de recharger la page. Avec la manière préférez-vous et où vous avez des problèmes?

InformationsquelleAutor Amir Rachum | 2010-11-06

il semble trop grand pour mon échelle

Cela dépend vraiment du contexte et des exigences fonctionnelles. C'est assez simple et trivial si. Plus de sons comme ça, c'est "trop d'information" pour vous et que vous avez réellement besoin d'apprendre les notions distinctes (HTTP, HTML, CSS, JS, Java, JSP, Servlet, Ajax, JSON, etc) individuellement de sorte que l'image plus grande (la somme de toutes ces langues/techniques) devient de plus en plus évident. Vous pouvez trouver cette réponse utile ensuite.

De toute façon, voici comment vous pourriez le faire avec juste JSP/Servlet sans 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>

avec CalculatorServlet qui est mappé sur un url-pattern de /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.
}

Faire Ajaxical travail est également pas trop difficile. C'est une question de notamment les suivantes JS dans la page JSP, HTML <head> (veuillez défiler vers la droite pour voir les commentaires dans le code qui explique ce que chaque ligne ne):

<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>

et changer les deux dernières lignes de doPost comme suit:

    response.setContentType("text/plain");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(String.valueOf(sum));

Vous pouvez même en faire un contrôle conditionnel, de sorte que votre formulaire fonctionne toujours pour le cas où l'utilisateur a JS désactivé:

    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);
    }

un suivi pour la première extraits: Si j'ajoute un autre bouton qui effectue une soustraction, comment puis-je déterminer la servlet dont l'un a été poussé?
Bouton nom et la valeur sont envoyés en tant que paramètre de la requête ainsi. Il suffit de cocher pour sa présence et/ou de sa valeur. Voir aussi cette réponse.
Comment passer de la valeur du bouton avec la JS exemple (JQuery ne pas le faire pour "soumettre" des éléments d'entrée)?
J'ai trouvé comment: (1) empêcher la soumission de formulaire "$('#calculatrice').submit(function() { return false;});" (2) écouter clique sur "soumettre types": "$('#calculatrice :submit').click(function(event){$form = $(this).parent("formulaire"); $.la poste($form.attr('action'), $form.serialize()+ "&" + $(this).attr("nom") + "=" + $(this).val(), fonction(responseText) { $('#result').texte(responseText);});});" (cela inclut l'ajout de quelque chose après "serialize()".
Vous avez raison, jQuery n'envoie pas le bouton enfoncé le long. J'ai toujours utilisé le jQuery Forme de plugin pour ajaxify formes et apparemment, il était le seul qui l'a fait. J'ai tort toujours supposé que c'était en fin de compte fait par jQuery lui-même avec le serialize() fonction. Merci pour le réveiller.
Dans votre programme, page jsp à l'ajout de deux chiffres et d'afficher l'o/p, c'est bien.. mais j'ai un problème que j'ai.e quels sont le résultat vient après l'ajout d'(sur le résultat précédent fraîche résultat d'écrasement), je veux que le résultat à y rester seulement au lieu de les écraser pouvez-vous m'aider sur ce point.

InformationsquelleAutor BalusC

Je ne sais pas si cela peut aider, mais il est au moins une calculatrice simple programme

     protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
/*READ THE FIRST NUMBER FROM TEXTBOX NAMED num1*/
Integer num1= Integer.parseInt(request.getParameter("num1")); 
/*READ THE SECOND NUMBER FROM TEXTBOX NAMED num2*/
Integer num2=Integer.parseInt(request.getParameter("num2"));
/*READ THE OPERATOR VALUE FROM SELECT TAG NAMED operator*/
String operator=request.getParameter("operator");
/*THE FINAL RESULT*/
Integer result=0;
/*THE RESPONSE TO THE CLIENT WILL BE IN HTML FORMAT*/
response.setContentType("text/html");
PrintWriter out = response.getWriter();
try {
/*ALTERNATIVELY IF STATEMENT CAN ALSO BE USED
if("+".equals(operator))
{
result = num1 + num2;
}
else if("-".equals(operator))
{
result = num1 - num2;
}
else if("*".equals(operator))
{
result = num1 * num2;
}
else if ("/".equals(operator))
{
result = num1 /num2;
}
*/
switch(operator)
{
case("+"): /*IF PLUS*/
result=num1+num2;
break;
case("-"): /*IF MINUS*/
result=num1-num2;
break;
case("*"): /*IF MULTIPLICATION*/
result=num1*num2;
break;
case("/"): /*IF DIVISION*/
result=num1/num2;
break;
}
/* TODO output your page here. You may use following sample code. */
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet ServletCalculator</title>");            
out.println("</head>");
out.println("<body>");
/*THE PART OF OUTPUT TO THE CLIENT*/
out.println("<h1>" + num1 +" "+operator+" "+num2+" = " + result+"</h1>");
out.println("</body>");
out.println("</html>");
} finally {            
out.close();
}
}

et le html est

    <!DOCTYPE html>
<html>
<body>
<form action="ServletCalculator">
enter first number <input name="num1" type="text"/>
<select name="operator">
<option value="+"> + </option>
<option value="-"> - </option>
<option value="*"> * </option>
<option value="/"> /</option>
</select>
enter second number <input name="num2" type="text"/>
<button type="submit"> Calculate </button>
</form>
</body>
</html>

InformationsquelleAutor student

sans doute, le moyen le plus simple sera de créer formulaire avec deux champs et le bouton de validation. À côté serveur, vous pouvez ajouter deux nombres et de l'imprimer.
Smt comme:

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html");
int a = Integer.valueOf(request.getParameter("a"));
int b = Integer.valueOf(request.getParameter("b"));
int res = a + b;
response.getWriter().println(res);
}

InformationsquelleAutor Stan Kurilin

1

Ce peut absolument être fait et peut être faite à l'aide du simple html et javascript. Vous pouvez éviter d'utiliser côté serveur java calcul pour cette.

À mon avis, on doit essayer de conserver le moins de charge sur le serveur. Pourquoi charger le serveur lorsque cela peut être fait du côté client ?

Calculs simples comme l'addition, la soustraction, la multiplication et la division ne peut être atteint que par l'écriture de fonctions javascript comme add(a, b), sub(a, b), mul(a, b), div(a, b). Et ces fonctions peuvent être appelées sur les différents événements click de bouton.
- Comme vous pouvez l'imaginer, j'ai posé cette question (il ya longtemps), pas parce que j'ai voulu créer une startup basée sur les calculatrices en ligne, mais parce que je voulais apprendre JSP.
- Ok. L'a obtenu. :). Juste essayé de l'aider. Pour ma défense j'ai juste commencé à l'aide de stackoverflow pour écrire les réponses. Déjà pour moi, c'était tout juste de lire. :). Afin de ne pas remarquer que cette question a été posée il y a longtemps.
- C'est d'accord. Bienvenue à la communauté 🙂
InformationsquelleAutor Bikash Rath

Vous devez vous connecter pour publier un commentaire.