简单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",
width:"50px",
height:"20px"
});
num2.css({
background:"#ccc",
width:"50px",
height:"20px"
});
way.css({
background:"#ccc",
width:"40px",
height:"20px"
});
eql.css({
background:"#ccc",
width:"40px",
height:"20px"
});
result.css({
background:"#ccc",
width:"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";
}
}
}
简单JQuery+AJAX+Servlet的计算器实现的更多相关文章
- jQuery Ajax传值给Servlet,在Servlet里Get接受参数乱码的解决方法
最近在学jquery ui,在做一个小功能的时候需要将前台的值获取到,通过Ajax传递给Servlet,然后再在返回数据结果,但是在Servlet接受参数的时候,通过后台打印,发现接受乱码,代码示例如 ...
- jquery ajax请求后台 的简单例子
jQuery.ajax(url,[settings]) 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax ...
- jQuery简单的Ajax调用示例
jQuery确实方便,下面做个简单的Ajax调用: 建立一个简单的html文件: <!DOCTYPE HTML> <html> <head> <script ...
- Jquery+ajax+json+servlet原理和Demo
Jquery+ajax+json+servlet原理和Demo 大致过程: 用户时间点击,触发js,设置$.ajax,开始请求.服务器响应,获取ajax传递的值,然后处理.以JSON格式返回给ajax ...
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- jquery ajax跨域请求后台的简单例子
一.简介AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简 ...
- 利用jQuery与.ashx完成简单的Ajax
在ASP.NET同样可以与其它编程语言一样,利用前台的Ajax技术,只是需要注意的是,后台的处理程序不再是一个aspx页面中的Page_Load,而且ASP.NET独有的“一般处理程序”.ashx,下 ...
- Jquery Ajax简单封装(集中错误、请求loading处理)
Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...
- 简单的jquery Ajax进行登录！
本案例包括login.html.login.php.jquery-1.12.0.min.js三个文件,只需将这三个文件放到同一文件夹下,即可运行. login.html: <!DOCTYPE h ...
随机推荐
- 数据库 schema含义
数据库Schema有两种含义,一种是概念上的Schema,指的是一组DDL语句集,该语句集完整地描述了数据库的结构.还有一种是物理上的Schema,指的是数据库中的一个名字空间,它包含一组表.视图和存 ...
- CUDA Fortran for Scientists and Engineers第二版翻译
下午听朋友说,NV把<CUDA Fortran for Scientists and Engineers>的出版权卖给了国内某出版商.第一反应是我们三翻译的岂不是白翻译了.第二 ...
- centos7下升级SSH
Linux 发行版中集成的 SSH 软件版本都比较老,存在着一些漏洞和安全隐患,需要升级 SSH 服务软件修补漏洞提升系统安全. SSH:SSH 有许多标准,通常 Linux 中 ( Redhat, ...
- 数据库迁移之mysql-redis.txt
一.mysql迁移数据到redis 关于redis+mysql应用: 微博当然是最大的redis集群了: 总结了基本流程: 1. 发微博– > 进入消息队列– > 存入MySQL– > ...
- 学习使用PM2管理nodejs进程
在项目中,偶尔对命令会忘记一下,所以在此记录下pm2的常用命令. 1. pm2是什么?pm2 是一个带有负载均衡的Node应用的进程管理器, 它能够管理Node应用,还能够对应用的运行状态进行监控. ...
- Java NIO：IO与NIO的区别
一.概念 NIO即New IO,这个库是在JDK1.4中才引入的.NIO和IO有相同的作用和目的,但实现方式不同,NIO主要用到的是块,所以NIO的效率要比IO高很多.在Java API中提供了两套N ...
- CentOS下安装PHP
今天終於進行了第三次的在linux下的php安裝,在安裝之前我進行了網站訪問測試. 第一步,先查看mysql.apache這兩項系統服務是否已經自動啟動了,chkconfig –list mysql. ...
- Vscode的python配置（macOS）
_ 1. Vscode是一款开源的跨平台编辑器.默认情况下,vscode使用的语言为英文(en),以下步骤改为中文 打开vscode工具,使用快捷键组合[Cmd+Shift+p],在搜索框中输入“co ...
- CentOS7 安装MySQL5.6
1. 检查是否有MariaDB和MySQL,如果有则卸载掉 [root@--- ~]# rpm -qa | egrep "mariadb|mysql" mariadb-serve ...
- Spark性能优化指南——基础篇（转载）
前言 在大数据计算领域,Spark已经成为了越来越流行.越来越受欢迎的计算平台之一.Spark的功能涵盖了大数据领域的离线批处理.SQL类处理.流式/实时计算.机器学习.图计算等各种不同类型的计算操作 ...