使用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();
}
}
结果展示