zoukankan      html  css  js  c++  java
  • 简单JQuery+AJAX+Servlet的计算器实现

    index.jsp

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="js/way.js"></script>
    <style type="text/css"></style>
    <link type="text/css" rel="styleSheet" href="css/index.css" />
    </head>
    <body>
    <div class="box">
    <form action="" method="post" id="form1">
    <table>
    <tr>
    <td width="30px"><input type="text" name="num1" id="cal1" /></td>
    <!-- <td width="30px"><input type="text" name="way" id="way"/> </td> -->
    <td>
    <select id="way" name="way">
    <option>+</option>
    <option>-</option>
    <option>*</option>
    <option>/</option>
    </select>
    </td>


    <td><input type="text" name="num2" id="cal2"/></td>
    <td><input type="text" id="eql" value="="/></td>
    <td><input type="text" id="result"/></td>
    <td><input type="button" value="onclick" id="login"/></td>
    </tr>
    <tr>
    <td colspan="6"><span id="check"></span></td>
    </tr>
    </table>
    </form>
    </div>
    </body>
    </html>

    way.js


    $(function(){
    var num1 = $("#cal1");
    var way = $("#way");
    var num2 = $("#cal2");
    var eql = $("#eql");
    var result = $("#result");

    num1.css({
    background:"#ccc",
    "50px",
    height:"20px"
    });
    num2.css({
    background:"#ccc",
    "50px",
    height:"20px"
    });
    way.css({
    background:"#ccc",
    "40px",
    height:"20px"
    });
    eql.css({
    background:"#ccc",
    "40px",
    height:"20px"
    });
    result.css({
    background:"#ccc",
    "50px",
    height:"20px"
    });
    //获取按钮给按钮一个点击事件
    $("#login").on('click',function (event) {

    var result = $("#result");
    var itemForm = $('#form1');
    //在Jquery中AJAX的写法
    $.ajax({
    type:"post",
    url:"/Calculate01/MyServlet",
    data: itemForm.serialize(),
    //接收后台传过来的值是text类型
    dataType:'text',
    success: function(data) {//date保存的是后台传入的数据

    //data是从控制层返回来的值
    if(data!="false"){
    var textId=$("#result");//根据文本框的id找到这个文本框,并将其变成jquery对象
    textId.val(data);//重点是这句话,赋值
    }else{
    alert("输入格式不正确");
    }
    // alert(data);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown){
    alert( XMLHttpRequest.status );
    }
    });
    })
    });
    Servlet

    package cn.edu.com.Service;

    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.regex.Pattern;

    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;

    public class MyServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    response.setContentType("text/html;character=utf-8");
    PrintWriter out = response.getWriter();
    String num1 = request.getParameter("num1");
    String num2= request.getParameter("num2");
    String way = request.getParameter("way");
    utilTool tool = new utilTool();
    String result = tool.getTool(num1, num2, way);

    if(result=="false") {
    out.print("false");
    }else {
    out.println(result);
    }
    }
    }

    utils类

    package cn.edu.com.Service;

    import java.util.regex.Pattern;

    public class utilTool {
    private double n;
    private String result;
    private double n1;
    private double n2;

    public String getTool(String num1,String num2,String way) {

    Pattern pattern = Pattern.compile("^(-?\d+)(\.\d+)?$");//返回一个Pattern的对象。
    Pattern pattern1 = Pattern.compile("^(-?\d+)(\.\d+)?$");//返回一个Pattern的对象。
    //与正则表达式进行匹配,匹配成功返回true匹配失败返回false

    boolean check_num1 = pattern.matcher(num1).matches();
    boolean check_num2 = pattern1.matcher(num2).matches();
    if(num1!=null && num2!=null&&check_num1==true&&check_num2==true) {
    if(way.equals("+")||way.equals("-")||way.equals("*")||way.equals("/")) {
    n1 = Double.parseDouble(num1);
    n2 = Double.parseDouble(num2);
    switch (way) {
    case "+":
    n = n1+n2;
    result = String.valueOf(n);
    break;
    case "-":
    n = n1-n2;
    result = String.valueOf(n);
    break;
    case "*":
    n = n1*n2;
    result = String.valueOf(n);
    break;
    case "/":
    n = n1/n2;
    result = String.valueOf(n);
    break;

    default:
    break;
    }

    return result;
    }else {
    return "false";
    }
    }
    else {
    return "false";
    }

    }
    }

  • 相关阅读:
    A query was run and no Result Maps were found for the Mapped Statement 'com.demo.dao.UserDao.check'. It's likely that neither a Result Type nor a Result Map was specified.
    layui监听input内容变动简单粗暴
    Java多线程中
    Java 对象内存分析
    MySQL重做日志
    并查集-Java实现
    java虚拟机类加载机制
    Java的23种设计模式概述
    redo log 有什么作用?
    什么是redo log ?
  • 原文地址:https://www.cnblogs.com/zhulina-917/p/9679518.html
Copyright © 2011-2022 走看看