使用ajax完成BMI网页计算器

创建web项目
jsp页面如下

<html><head><title>局部刷新-ajax</title><script type="text/javascript">// 使用内存中的异步对象,代替浏览器发起请求.异步对象使用js创建和管理function doAjax() {// 1.创建异步对象var xmlHttp = new XMLHttpRequest();// 2.绑定事件// 事件绑定的函数是一个回调函数,当readyStatus状态值发生改变时才会调用xmlHttp.onreadystatechange = function () {// 处理服务器端返回的数据,更新当前页面// alert("readyState属性值==" + xmlHttp.readyState + "| status" + xmlHttp.status);// 当readyStatus的值为4且状态码为200代表从服务器获取数据成功,既可下一步操作了if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {// alert("拿到了" + xmlHttp.responseText);// 更新到dom对象上var data = xmlHttp.responseText;document.getElementById("mydata").innerText = data;}}// 3.初始请求数据// 获取dom对象的value值var name = document.getElementById("name").value;var w = document.getElementById("w").value;var h = document.getElementById("h").value;var param = "name=" + name + "&w=" + w + "&h=" + h;// alert("param = " + param);xmlHttp.open("get", "bmiAjax?" + param, true);// 4.发起请求xmlHttp.send();}</script></head><body><p>局部刷新ajax计算bmi</p><div>姓名:<input type="text" id="name"/><br/>体重:<input type="text" id="w"/><br/>身高:<input type="text" id="h"/><br/><input type="button" value="计算bmi" onclick="doAjax()"/><br/><br/><br/><div id="mydata">等待数据加载...</div></div></body>
</html>

页面展示如下

服务器端代码如下

@WebServlet("/bmiAjax")
public class BmiPrintServlet extends javax.servlet.http.HttpServlet {protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {}protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {// 接收参数String strName = request.getParameter("name");String height = request.getParameter("h");String weight = request.getParameter("w");// 计算bmi: bmi = 体重/身高float h = Float.valueOf(height);float w = Float.valueOf(weight);float bmi = w / (h * h);// 判断bmi的范围String msg = "";if (bmi <= 18.5) {msg = "您比较瘦";} else if (bmi > 18.5 && bmi <= 23.9) {msg = "您是正常的";} else if (bmi > 24 && bmi <= 27) {msg = "您稍胖";} else {msg = "您超重了";}System.out.println("msg = " + msg);msg = "您好:" + strName + "先生/女士, 您的bmi值是: " + bmi + "," + msg;// 响应ajax需要的数据response.setContentType("text/html;charset=utf-8");PrintWriter pw = response.getWriter();pw.println(msg);pw.flush();pw.close();}
}

结果展示

ajax小练习-BMI网页计算器相关推荐

HTML+CSS好看的小黄人网页制作（首页部分）
效果如下: 整体效果: body部分动图: 导航栏二级菜单跳转: 代码部分: 首页HTML代码: <!DOCTTYPE html> <html lang="en" ...
python代码测试健康指数计算器_python编写的bmi体重指数计算器、出租车费用计算器、个税计算器、猜数字游戏...
''' 写四个函数分别包含bmi体重指数计算器.出租车费用计算器.个税计算器.猜数字游戏 ''' #体重指数计算器 def bmi(): while 1: #声明变量身高.体重 height=in ...
微信小程序项目实例——体质计算器
微信小程序项目实例--体质计算器文章目录微信小程序项目实例--体质计算器一.项目展示二.项目核心代码文末项目代码见文字底部,点赞关注有惊喜一.项目展示体质计算器是一款简单的健康类小程序 ...
安卓bmi项目_身高体重指数计算器手机版|bmi体重指数计算器安卓版下载 v1.0.0 - 跑跑车安卓网...
bmi体重指数计算器是一款手机计算器工具软件,为用户进行身高体重的bmi计算,让你知道你的肥胖特征,让你能够知晓更好去保持好身材,快来下载使用. 软件介绍体重指数计算器描述本应用程序是一款免费的 ...
【BMI指数计算器V3.0】项目实战
[BMI指数计算器V3.0]项目实战震撼发布,欢迎前来交流~~~,如果是刚来的朋友可以先从 [BMI指数计算器V1.0]项目实战,[BMI指数计算器V2.0]项目实战开始,这样循序渐进更能感受到每一个 ...
【BMI指数计算器V4.0】项目实战
前言 [BMI指数计算器V4.0]与[BMI指数计算器V3.0]实现的效果是一样的,不同的是在[BMI指数计算器V3.0]的基础上加入了Service层(服务),BroadcastReceiver(广 ...
【BMI指数计算器V2.0】项目实战
[BMI指数计算器V2.0]是建立在[BMI指数计算器V1.0]的基础上进行功能的增加,以版本迭代的方式循序渐进的进行Android核心技术的练习. 更新列表: 1.BMI计算标准选择 2.体重状态表 ...
Ajax广告词,用 ajax 的方法解决网页广告显示的问题
用 ajax 的方法解决网页广告显示的问题 2017年12月12日 | 萬仟网IT编程 | 我要评论有的时候google或者其他广告显示不出来,造成页面访问速度奇慢,怎么样解决这个问题呢?我们可以借 ...
total_method写四个函数分别包含bmi体重指数计算器、出租车费用计算器、个税计算器、猜数字游戏
'''写四个函数分别包含bmi体重指数计算器.出租车费用计算器.个税计算器.猜数字游戏 ''' # 使用到python中的内置的random模块 # 引入random模块 import random ...

ajax小练习-BMI网页计算器

使用ajax完成BMI网页计算器

ajax小练习-BMI网页计算器相关推荐

最新文章

热门文章