Ajax实战代码详解（实现BMI计算器）

最新推荐文章于 2024-02-09 21:18:22 发布

小高写BUG

最新推荐文章于 2024-02-09 21:18:22 发布

阅读量756

点赞数 1

分类专栏： Vue前端框架

本文链接：https://blog.csdn.net/gao1213977085/article/details/119060429

版权

Vue前端框架专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

Ajax实战（一）

Ajax实战（一）

在这里插入图片描述

1.Ajax基础知识回顾

传送门：https://blog.csdn.net/gao1213977085/article/details/118973276?spm=1001.2014.3001.5501

2.使用全局刷新，实现计算BMI。

传送门：JSP+Servlet实现BMI计算器（https://blog.csdn.net/gao1213977085/article/details/119036136?spm=1001.2014.3001.5501 ）

可以使用JSP显示request作用域中的数据，使用el表达式（是一种在JSP页面获取数据的简单方式(只能获取数据，不能设置数据）

也可以使用HttpServletResponse对象输出数据，数据给了浏览器。浏览器可以接收HttpServletResponse对象print的数据。

        //把数据保存到 request 作用域
        info = strName +"您的BMI是["+bmi+"],"+info;

        //使用HttpServletResponse对象输出数据，响应请求

        //使用Response响应对象输出请求。
        //设置输出格式
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();

        //输出数据，输出到浏览器
        out.println(info);
        //清空缓存
        out.flush();
        out.close();

3.Ajax技术（局部刷新）实现计算BMI。

使用异步对象XMLHttpRequest发起请求，接收数据。更新dom对象，Ajax操作中，处理的是数据，从服务器端接收的数据，没有视图。

3.1前端代码

在这里插入图片描述

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>使用ajax计算bmi</title>
  </head>
  <body>
    <div align="center">
      <p>Ajax请求和form无关，有无from都可以</p>
        
      <table>

        <tr>
          <td>姓名：</td>
          <td><input type="text" id="name"></td>
        </tr>

        <tr>
          <td>体重：</td>
          <td><input type="text" id="w"></td>
        </tr>

        <tr>
          <td>身高：</td>
          <td><input type="text" id="h"></td>
        </tr>

        <tr>
          <td>操作：</td>
          <td><input type="button" value="ajax请求" onclick="doAjax()"></td>
        </tr>




      </table>
        
      <br/>
      <div id="mydiv">等待更新数据</div>
    </div>



  <script type="text/javascript">
    function doAjax() {
      //alert("button click");
      //方便调试。
      console.log("=======button click======");

      //使用XMLHttpRequest做Ajax局部刷新
        
      //1.创建异步对象
      var xhr = new XMLHttpRequest();  //这一步readyState= 0；就是内部的一个数据不会输出
        
      //2.绑定事件
      xhr.onreadystatechange = function () {


        console.log("==onreadystatechange== ,属性readyState="+xhr.readyState + ",status = "+xhr.status);
        /*
        * =======button click======
        (index):50 ==onreadystatechange== ,属性readyState=1 status = 0
        (index):50 ==onreadystatechange== ,属性readyState=2 status = 200 ;200就是发送成功
        (index):50 ==onreadystatechange== ,属性readyState=3 status = 200服务器端返回数据
        (index):50 ==onreadystatechange== ,属性readyState=4 status = 200异步对象正确接收数据，开发人员可以使用。
        * readyState=4 操作最好时机！！！！
        * */

        if(xhr.readyState==4&&xhr.status==200){
          //开发人员处理服务器返回的数据，更新dom对象
          var data = xhr.responseText;
          //alert("data="+data);//hello    BmiAjaxServlet print的内容

          //更新dom对象
          document.getElementById("mydiv").innerHTML = data;

        }
      }

      //3.初始化请求参数

      //收集请求中需求的参数值
      var pname = document.getElementById("name").value;
      var ph = document.getElementById("h").value;
      var pw = document.getElementById("w").value;

      var param ="bmiAjax?name="+pname+"&w="+pw+"&h="+ph;

      //BmiServlet？name=lisi&w=80&h=1.8   模仿get方法URL地址栏传递数据

      //访问这个地址同时提交这个值
      console.log("param======"+param);
      xhr.open("get",param,true);//readyState=1

      //4.发起请求
      xhr.send()//readyState=2  请求发给Servlet

    }
  </script>


  </body>
</html>

在这里插入图片描述

3.2后端代码BmiAjaxServlet

public class BmiAjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("=========接收了Ajax的请求=========");
        //接收请求的参数
        String strName = request.getParameter("name");
        String strW = request.getParameter("w");
        String strH = request.getParameter("h");

        //接收到的是String
        //String转float
        System.out.println(strName);
        System.out.println(strH);
        float w = Float.valueOf(strW);
        float h = Float.valueOf(strH);

        //计算bmi 公式w /(h*h)

        float bmi =w/(h*h);
        System.out.println(bmi);

        String info="";
        if(bmi <18.5){
            info = "比较瘦";
        }else if(bmi>=18.5&& bmi<24){
            info = "正常范围";
        }else{
            info = "比较胖";


        }

        //使用jsp

        //把数据保存到 request 作用域
        info = strName +"您的BMI是["+bmi+"],"+info;
        //输出数据
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();

        out.println(info);
        out.flush();
        out.close();
    }
}

在这里插入图片描述

3.3web.xml配置

<?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.gaoxin.controller.BmiAjaxServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>BmiAjaxServlet</servlet-name>
        <url-pattern>/bmiAjax</url-pattern>
    </servlet-mapping>
</web-app>

在这里插入图片描述

小高写BUG

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Ajax实战代码详解（实现BMI计算器）

文章目录Ajax实战（一）1.Ajax基础知识回顾2.使用全局刷新，实现计算BMI。3.Ajax技术（局部刷新）实现计算BMI。3.1前端代码3.2后端代码BmiAjaxServlet3.3web.xml配置Ajax实战（一）1.Ajax基础知识回顾传送门：https://blog.csdn.net/gao1213977085/article/details/118973276?spm=1001.2014.3001.55012.使用全局刷新，实现计算BMI。传送门：JSP+Servlet
复制链接

扫一扫