ajax小练习-BMI网页计算器

使用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 (Asynchronous JavaScript and XML) 是一种用于前后端数据交互的技术。它允许在不刷新整个页面的情况下,通过异步方式向服务器发送请求并获取响应数据。 使用 AJAX 可以实现以下功能: 1. 发送异步请求:通过 JavaScript 创建 XMLHttpRequest 对象,并使用该对象发送 HTTP 请求到服务器。 2. 处理响应数据:一旦服务器返回响应,可以通过回调函数处理返回的数据。常见的数据格式包括 XML、JSON 或纯文本。 3. 更新页面内容:根据服务器返回的数据,可以使用 JavaScript 动态更新页面内容,而不需要刷新整个页面。这样可以提升用户体验并减少网络流量。 以下是一个简单的 AJAX 示例代码: ```javascript // 创建 XMLHttpRequest 对象 var xhr = new XMLHttpRequest(); // 指定请求的方法和 URL xhr.open('GET', 'https://api.example.com/data', true); // 设置回调函数处理响应 xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { // 处理服务器返回的数据 var response = xhr.responseText; console.log(response); // 更新页面内容 document.getElementById('result').innerHTML = response; } }; // 发送请求 xhr.send(); ``` 在上述示例中,我们使用 AJAX 发送了一个 GET 请求到 `https://api.example.com/data`,并设置了一个回调函数来处理服务器返回的数据。在回调函数中,我们将返回的数据打印到控制台,并将其更新到 id 为 `result` 的 HTML 元素中。 通过 AJAX,前端可以与后端进行实时的数据交互,从而实现更加动态和响应式的用户界面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值