ajax小练习-BMI网页计算器

最新推荐文章于 2023-11-30 10:45:00 发布

迷亭君

最新推荐文章于 2023-11-30 10:45:00 发布

阅读量903

点赞数

分类专栏： ajax+JQuery+Vue 文章标签： ajax javascript 服务器

本文链接：https://blog.csdn.net/qq_49044908/article/details/121129709

版权

ajax+JQuery+Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

使用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();
    }
}

结果展示
在这里插入图片描述

迷亭君

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
ajax小练习-BMI网页计算器

使用ajax完成BMI网页计算器创建web项目jsp页面如下<html> <head> <title>局部刷新-ajax</title> <script type="text/javascript"> // 使用内存中的异步对象,代替浏览器发起请求.异步对象使用js创建和管理 function doAjax() { // 1.创建异步对象 var xmlHttp
复制链接

扫一扫

专栏目录