Ajax小测试，计算人的BMI值

最新推荐文章于 2024-07-09 15:51:39 发布

倔强的加瓦

最新推荐文章于 2024-07-09 15:51:39 发布

阅读量113

点赞数

文章标签： ajax servlet jsp jquery

本文链接：https://blog.csdn.net/m0_56184347/article/details/117598074

版权

Ajax小测试，计算人的BMI值

什么是Ajax

ajax是处理异步请求和局部响应的，功能强大，可以减少请求的时间和增加用户的感受
全称是：Asynchronous JavaScript and XML(异步的JavaScript and XML)

主要使用的步骤

1，写好前端的界面，并利用ajax来将前端输入的数据来传到后端的servlet来处理数据

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>测量BMI值</title>
</head>
//这里是指定jQuery外部文件的位置，有了他才可以用ajax，房外web（webapp）下
<script src="jQuery外部文件/jquery-3.4.1.js"></script>

<script type="text/javascript">
    $(function () {
        $("#js").click(function(){
            var name=$("#name").val();//获取button的value值
            var w=$("#w").val();
            var h=$("#h").val();
            //启用jQuery
            $.ajax({
                url:"one",//这里是发送请求的地址，让这个后端来处理发送的数据，我的xml文件中，配置的处理这个数据程序的别名，叫做/one
                data:{
                    "name":name,
                    "w":w,
                    "h":h
                },
               dataType:"text",
               //这里是当后端把数据传输回来之后，进行接收
                success:function (resp) {
                    $("#dis").val(resp);        
                }
            })
        })
    })
   
</script>

<body>
<table>
    <tr>
        <td>用户姓名</td>
        <td><input type="text" id="name"></td>
    </tr>
    <tr>
        <td>您的身高</td>
        <td><input type="text" id="h"></td>
    </tr>
    <tr>
        <td>您的体重</td>
        <td><input type="text" id="w"></td>
    </tr>
</table>
<br>
<input type="button" value="获取BMI值(采用Ajax)"onclick="search()"><br>
<div id="disbim">请点击提交来显示您的bim值</div>
</body>
</html>

2后端接收到数据，并且处理数据

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class oneServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws
            ServletException, IOException {
            //分别获取jsp界面中，通过ajax传送过来的值
        String name=request.getParameter("name");
        String weight=request.getParameter("w");
        String height=request.getParameter("h");
        Float w=Float.valueOf(weight);
        Float h=Float.valueOf(height);
        Float bmi=w/(h*h);
        String result="";
        if(bmi<18){
            result="您的体型偏瘦";
        }else if(bmi>=18&&bmi<=24){
            result="您的体型正常";
        } else{
            result="您的体型偏胖";
        }
        String message="尊敬的"+name+"先生/女士,"+result+",您的bmi值为"+bmi;

        //将结果写入相应包中，返回给ajax请求
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out =response.getWriter();
        out.print(message);
        out.flush();
        out.close();

    }
}

总结：ajax的请求格式比较固定，能记住是最好的。

倔强的加瓦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Ajax小测试，计算人的BMI值

Ajax小测试，计算人的BMI值什么是Ajaxajax是处理异步请求和局部响应的，功能强大，可以减少请求的时间和增加用户的感受全称是：Asynchronous JavaScript and XML(异步的JavaScript and XML)主要使用的步骤1，写好前端的界面，并利用ajax来将前端输入的数据来传到后端的servlet来处理数据<%@ page contentType="text/html;charset=UTF-8" language="java" %><ht
复制链接

扫一扫