AJAX局部刷新使用简单例子

最新推荐文章于 2022-02-26 18:01:10 发布

syf_wfl

最新推荐文章于 2022-02-26 18:01:10 发布

阅读量348

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/wflsyf/article/details/111867682

版权

JSP代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>局部刷新</title>
  </head>
  <body>
      <p>局部刷新，显示BMI</p>
      <script type="text/javascript">

          doajax=function () {
            //1.建立异步对象
            let XMLHttp=new XMLHttpRequest();
            //2.绑定事件
            XMLHttp.onreadystatechange=function () {
                if (XMLHttp.readyState==4&&XMLHttp.status==200){
                    let data=XMLHttp.responseText;
                    document.getElementById("mydata").innerText=data;
                }

            }
              let name=document.getElementById("name").value;
              let height=document.getElementById("height").value;
              let weight=document.getElementById("weight").value;
            let param="name="+name+"&height="+height+"&weight="+weight;
            //3.open
            XMLHttp.open("get","my?"+param,true);
            //4.send
            XMLHttp.send();
          }
      </script>
      <div>局部刷新
        <br>

          姓名<input type="text" id="name">
          身高<input type="text" id="height">
          体重<input type="text" id="weight">
          <input type="button" value="计算bmi" onclick="doajax()">
      </div>
        <div id="mydata">等待数据......</div>
  </body>
</html>

Servlet 代码

        String name= request.getParameter("name");
        String kg= request.getParameter("weight");
        String h= request.getParameter("height");
        //response中的数据就是ajax里面获取到的数据
        response.getWriter().print(name+"的体脂为"+Float.parseFloat(kg)/(Float.parseFloat(h)*Float.parseFloat(h)));