带有 JSP/Servlet 和 Ajax 的简单计算器

Posted

技术标签:

【中文标题】带有 JSP/Servlet 和 Ajax 的简单计算器【英文标题】:Simple calculator with JSP/Servlet and Ajax 【发布时间】:2011-05-06 02:39:52 【问题描述】:

这是我previous question 的延续,但我觉得它值得单独使用,特别是因为我得到了非常详细的答案。

我想在 JSP 中创建一个简单的计算器。将有两个数字文本框和一个添加按钮。理想情况下,我希望答案出现在页面中而无需重新加载,但从我得到的答案来看,这对我的规模来说似乎太大了。我可以想到:1)将答案打印到第三个文本框(这可能吗?)或以某种方式加载相同的页面(带有添加按钮和所有)答案(并且能够输入不同的数字等等) .

有什么好的方法可以做到这一点?

【问题讨论】:

您可以在没有任何 servlet 的情况下创建它。仅使用 html + javascript。另一种方式 - 在服务器上进行计算。这里需要 Ajax 来避免页面重新加载。您喜欢哪种方式,哪里有问题? 【参考方案1】:

我不确定这是否有帮助,但它至少是一个简单的计算器程序:

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 AN 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();
    

HTML 是:

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

【讨论】:

【参考方案2】:

这绝对可以完成,并且可以使用简单的 HTML 和 JavaScript 完成。您可以避免为此使用服务器端 Java 计算。

在我看来,我们应该尽量保持服务器上的最小负载。如果可以在客户端完成,请不要加载服务器。

简单的计算,如加法、减法、乘法和除法,可以通过编写像 add(a, b), sub(a, b), mul(a, b), div(a, b) 这样的 JavaScript 函数来实现.并且可以在不同的按钮点击事件上调用这些函数。

【讨论】:

如你所想,我问这个问题(很久以前)不是因为我想创建一个基于在线计算器的创业公司,而是因为我想学习 JSP。 好的。知道了。 :)。只是想帮忙。在我的辩护中,我刚开始使用 *** 来写答案。以前对我来说它只是只读的。 :)。所以没有注意到这个问题是很久以前提出的。【参考方案3】:

可能,最简单的方法是创建一个带有两个字段和一个提交按钮的form。在服务器端,您可以添加两个数字并打印出来。

类似:

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

【讨论】:

【参考方案4】:

对我来说似乎太大了

这实际上取决于上下文和功能要求。虽然它非常简单和微不足道。听起来这对您来说“信息太多”,并且您实际上需要单独学习单独的概念(HTTP、HTML、CSS、JS、Java、JSP、Servlet、Ajax、JSON 等) em> 以便更大的图景(所有这些语言/技术的总和)变得更加明显。你可能会发现this answer 很有用。

不管怎样,下面是你如何在没有 Ajax 的情况下只使用 JSP/Servlet 来做到这一点:

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>

CalculatorServlet 映射在 /calculatorurl-pattern 上:

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


让 Ajaxical 的东西工作起来也不是那么难。只需在 JSP 的 HTML &lt;head&gt; 中包含以下 JS(请向右滚动查看代码 cmets,其中解释了每一行的作用):

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

并将doPost的最后两行更改如下:

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

您甚至可以使其成为条件检查,以便您的表单在用户禁用 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);
    

【讨论】:

第一个 sn-ps 的跟进:如果我添加另一个做减法的按钮,我如何告诉 servlet 哪个按钮被按下? 按钮的名称和值也作为请求参数发送。只需检查它的存在和/或它的价值。另请参阅this answer。 @BalusC:如何通过 JS 示例传递按钮的值(JQuery 不对“提交”输入元素执行此操作)? @BalusC:我发现了如何:(1)阻止表单提交“$('#calculator').submit(function() return false;);” (2)监听点击“提交类型”:“$('#calculator :submit').click(function(event)$form = $(this).parent("form"); $.post( $form.attr('action'), $form.serialize()+ "&" + $(this).attr("name") + "=" + $(this).val(), function(responseText) $('#result').text(responseText);););" (这包括在“serialize()”之后添加一些东西。 @AndrewBourgeois:你是对的,jQuery 不会发送按下的按钮。我一直使用jQuery Form plugin 来ajaxify 表单,显然它就是这样做的。我一直错误地认为它最终是由 jQuery 本身使用 serialize() 函数完成的。谢谢你的叫醒。

以上是关于带有 JSP/Servlet 和 Ajax 的简单计算器的主要内容,如果未能解决你的问题,请参考以下文章

Java Web 技术(JSP 和 servlet)中的 AJAX 自动完成文本框

如何使用 JSP/Servlet 和 Ajax 将文件上传到服务器?

原生AJAX+jsp+servlet实现百度搜索框提示效果

JSP+Servlet+Ajax实现用户增删改查的例子

Java项目:仿天猫网上商城项目(java+jsp+servlet+mysql+ajax)

Java项目:仿天猫网上商城项目(java+jsp+servlet+mysql+ajax)