ajax-210810-04---练习&局部刷新计算bmi

最新推荐文章于 2025-12-13 22:02:08 发布

原创最新推荐文章于 2025-12-13 22:02:08 发布 · 450 阅读

0 ·

CC 4.0 BY-SA版权

白光一

文章标签：

#ajax

ajax 专栏收录该内容

7 篇文章

订阅专栏

该博客介绍了如何使用Ajax实现局部刷新来计算BMI（身体质量指数）。通过创建XMLHttpRequest对象，绑定事件处理函数，初始化请求参数并发送GET请求到后台Servlet。BmiAjaxServlet接收到请求后，计算BMI并返回结果，前端JavaScript更新页面显示。这个例子展示了前端与后端的交互，以及局部刷新在实际应用中的运用。

ajax局部刷新步骤

1. 新建jsp，使用XMLHttpRequest异步对象
	1） 创建
	2） 绑定事件
	3） 初始请求
	4） 发送请求

2. 创建服务器的servlet，接收并处理数据，把数据输出给异步对象。

演示（局部刷新—ajax）

index.jsp（局部刷新—ajax）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>局部刷新---ajax</title>
    <script type="text/javascript">

        // 使用内存中的异步对象，代替浏览器发起请求，异步对象使用js创建和管理。
        function doAjax(){
            // 1. 创建异步对象
            var xmlHttp = new XMLHttpRequest();

            // 2. 绑定事件
            xmlHttp.onreadystatechange = function (){
                // 处理器服务器返回的数据，更新当前页面
                
                // alert("readyState："+xmlHttp.readyState)
               
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    // alert(xmlHttp.responseText);

                    // 更新当前页面数据
                    var data = xmlHttp.responseText;
                    document.getElementById("mydata").innerText = data;
                }
            }

            // 3. 初始化请求参数
            // 获取dom对象的value属性值
            var name = document.getElementById("name").value;
            var weight = document.getElementById("weight").value;
            var height = document.getElementById("height").value;

            var param = "name="+name + "&weight="+weight + "&height="+height;
            // alert("param--->"+param);
            // 也就是把参数值发送给BmiAjaxServlet.java  ，get请求拼接字符
            xmlHttp.open("get","bmiAjaxServlet?"+param,true);

            // 4. 发起请求
            xmlHttp.send();
        }
    </script>
</head>
    <body>
        <p>局部刷新---ajax</p>
        <div>
            <span>姓名：</span><input type="text" id="name"/><br/>
            <span>体重(公斤)：</span><input type="text" id="weight"/><br/>
            <span>身高(米/单位)：</span><input type="text" id="height"/><br/>
            <input type="submit" value="计算" οnclick="doAjax()"/>
        </div>
        <br/>
        <div id="mydata">等待加载数据......</div>
    </body>
</html>

BmiAjaxServlet.java（局部刷新—ajax）

package com.bgy.controller;

import java.io.IOException;
import java.io.PrintWriter;

public class BmiAjaxServlet 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 {

        System.out.println("接收了ajax的请求");

        // 接收请求参数
        String name = request.getParameter("name");
        String weight = request.getParameter("weight");
        String height = request.getParameter("height");

        // 计算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 = "您太胖了，长点儿心吧！";
        }

        msg = name + "，" + "bmi指数为" + bmi + "，" + msg;
        System.out.println("mgs--->"+msg);

        // 使用HttpServletResponse输出数据
        response.setContentType("text/html;charset=utf-8");
        // 获取PrintWrite
        PrintWriter writer = response.getWriter();
        // 输出数据
        writer.print(msg);
        // 清空缓存
        writer.flush();
        // 关闭流
        writer.close();

    }
}

web.xml（servlet映射）

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    
    <servlet>
        <servlet-name>BmiAjaxServlet</servlet-name>
        <servlet-class>com.bgy.controller.BmiAjaxServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>BmiAjaxServlet</servlet-name>
        <url-pattern>/bmiAjaxServlet</url-pattern>
    </servlet-mapping>
</web-app>