Ajax的两个实现案例

最新推荐文章于 2024-07-16 17:52:21 发布

郁闷奶茶

最新推荐文章于 2024-07-16 17:52:21 发布

阅读量859

点赞数

分类专栏： Javaweb 文章标签： ajax 服务器 javascript

本文链接：https://blog.csdn.net/a1272159758/article/details/122561139

版权

Javaweb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用Ajax，局部刷新输入身高体重，计算用户的BMI

首先编写index.jsp页面


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>局部刷新bmi</title>
    <script type="text/javascript">
      //使用内存的异步对象，代替浏览器发起请求。异步对象使用js创建和管理的。
       function doAjax() {
         //1.创建异步对象
         var xmlHttp = new XMLHttpRequest();
         //2.绑定事件
         xmlHttp.onreadystatechange = function () {
           //处理服务器端返回的数据
           //alert("readyState属性值====="+xmlHttp.readyState + "丨status" +xmlHttp.status)
           if (xmlHttp.readyState = 4 && xmlHttp.status ==200){
             //alert(xmlHttp.responseText);
             var data =xmlHttp.responseText;
             //更新dom对象，更新页面数据
             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>局部刷新ajxa-计算bmi</p>
  <div>
    <!-- 没有使用form -->
    姓名：<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()">
  </div>
  <br>
  <br>
  <div id="mydata">
    等待加载数据....
  </div>
  </body>
</html>

然后写对应的Servlet页面，并且把他配到xml文件种

package com.bjpowernode.controller;

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

@javax.servlet.annotation.WebServlet(name = "BmiServlet")
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 strname = request.getParameter("name");
        String weight =request.getParameter("w");
        String height =request.getParameter("h");

        //计算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 = "您的bmi是正常的";
        }else if (bmi >24 && bmi <=27){
            msg = "您的身体比较胖";
        }else {
            msg = "您的身体特别肥胖";
        }
        System.out.println("msg=" + msg);
        msg = "您好：" + strname + "先生/女士，您的bmi值是：" +bmi + "," +msg;

        //响应ajax需要的数据，使用HttpServletResponse输出数据
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.println(msg);
        out.flush();
        out.close();
    }
}

两个结合便可以完成Ajax局部刷新，计算BMI的功能
下面是效果截图
在这里插入图片描述

第二个案例：通过编号找到省对应的省，省会，简称

首先导入了两个sql文件

SET FOREIGN_KEY_CHECKS=0;

DROP TABLE IF EXISTS `city`;
CREATE TABLE `city` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `provinceid` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8;


INSERT INTO `city` VALUES ('1', '石家庄市', '1');
INSERT INTO `city` VALUES ('2', '秦皇岛', '1');
INSERT INTO `city` VALUES ('3', '保定市', '1');
INSERT INTO `city` VALUES ('4', '张家口', '1');
INSERT INTO `city` VALUES ('5', '南昌市', '9');
INSERT INTO `city` VALUES ('6', '九江市', '9');
INSERT INTO `city` VALUES ('7', '宜春市', '9');
INSERT INTO `city` VALUES ('8', '福州市', '8');
INSERT INTO `city` VALUES ('9', '厦门市', '8');
INSERT INTO `city` VALUES ('10', '泉州市', '8');
INSERT INTO `city` VALUES ('11', '龙岩市', '8');
INSERT INTO `city` VALUES ('12', '太原', '2');
INSERT INTO `city` VALUES ('13', '大同', '2');
INSERT INTO `city` VALUES ('14', '呼和浩特', '3');
INSERT INTO `city` VALUES ('15', '包头', '3');
INSERT INTO `city` VALUES ('16', '呼伦贝尔', '3');


DROP TABLE IF EXISTS `province`;
CREATE TABLE `province` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL COMMENT '省份名称',
  `jiancheng` varchar(255) DEFAULT NULL COMMENT '简称',
  `shenghui` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;


INSERT INTO `province` VALUES ('1', '河北', '冀', '石家庄');
INSERT INTO `province` VALUES ('2', '山西', '晋', '太原市');
INSERT INTO `province` VALUES ('3', '内蒙古', '蒙', '呼和浩特市	');
INSERT INTO `province` VALUES ('4', '辽宁', '辽', '沈阳');
INSERT INTO `province` VALUES ('5', '江苏', '苏', '南京');
INSERT INTO `province` VALUES ('6', '浙江', '浙', '杭州');
INSERT INTO `province` VALUES ('7', '安徽', '皖', '合肥');
INSERT INTO `province` VALUES ('8', '福建', '闽', '福州');
INSERT INTO `province` VALUES ('9', '江西', '赣', '南昌');

在数据库种加了两个表
然后编写jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>使用json格式的数据</title>
    <script TYPE="text/javascript">
        function doSearch() {
            //1.创建异步对象
            var xmlHttp = new XMLHttpRequest();
            //2.绑定事件
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4 && xmlHttp.status ==200){
                    var data = xmlHttp.responseText;
                    var jsonObj = eval("("+ data +")");
                    //更新dom
                    document.getElementById("proname").value = jsonObj.name;
                    document.getElementById("projiancheng").value = jsonObj.jiancheng;
                    document.getElementById("proshenghui").value = jsonObj.shenghui;

                }
            }

            //3.初始请求对象的请求参数
            var proid = document.getElementById("proid").value;
            xmlHttp.open("get","queryjson?proid="+proid,true);

            //4.发送请求
            xmlHttp.send();

        }

    </script>
</head>
<body>
<p>ajax请求使用json格式数据</p>
<table>
    <tr>
        <td>省份编号：</td>
        <td><input type="text" id="proid">
            <input type="button" value="搜索" onclick="doSearch()">
        </td>

    </tr>
    <tr>
        <td>省份名称：</td>
        <td><input type="text" id="proname"></td>
    </tr>
    <tr>
        <td>省份简称：</td>
        <td><input type="text" id="projiancheng"></td>
    </tr>
    <tr>
        <td>省会名称：</td>
        <td><input type="text" id="proshenghui"></td>
    </tr>
</table>

</body>
</html>

写一个Province类，有各种属性，然后封装，对外提供setter和getter


public class Province {
    private Integer id;
    private String name;
    private String jiancheng;
    private String shenghui;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getJiancheng() {
        return jiancheng;
    }

    public void setJiancheng(String jiancheng) {
        this.jiancheng = jiancheng;
    }

    public String getShenghui() {
        return shenghui;
    }

    public void setShenghui(String shenghui) {
        this.shenghui = shenghui;
    }
}

然后写一个ProvinceDao类，里面写一个方法来链接数据库，并且根据我们输入的ID获得一个完整的province对象，这里只截了方法

 //根据id获取一个完整的Province对象
    public Province queryProvinceByID(Integer provinceId) {
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        String sql = "";

        String url = "jdbc:mysql://localhost:3306/springdb";
        String username = "root";
        String password = "123456";

        Province province = null;

        //加载驱动
        try {
            Class.forName("com.mysql.jdbc.Driver");
            conn = DriverManager.getConnection(url, username, password);
            //创建PrepareStatement
            sql = "select id,name,jiancheng,shenghui from province where id=?";
            ps = conn.prepareStatement(sql);
            //设置参数值
            ps.setInt(1, provinceId);
            //执行sql
            rs = ps.executeQuery();
            //便利rs
            /*while(rs.next()){//当你的rs有多余一条记录时
                name = rs.getString("name");
            }
          */
            if (rs.next()) {
                province = new Province();
                province.setId(rs.getInt("id"));
                province.setName(rs.getString("name"));
                province.setJiancheng(rs.getString("jiancheng"));
                province.setShenghui(rs.getString("shenghui"));
            }

        } catch (ClassNotFoundException | SQLException e) {
            e.printStackTrace();
        } finally {
            if (rs != null) {
                try {
                    rs.close();
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
            }
            if (ps != null) {
                try {
                    ps.close();
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
            }
            if (conn != null) {
                try {
                    conn.close();
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
            }
        }
        return province;

    }

然后编写servlet，把province对象用jackson转换为json格式数据，并且
响应输出给服务器


import com.bjpowernode.dao.ProvinceDao;
import com.bjpowernode.entity.Province;
import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(name = "QueryJsonServlet")
public class QueryJsonServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //默认值，{} :表示json格式的数据
         String json = "{}";
        //获取请求参数，省份id
        String strProid = request.getParameter("proid");
        //判断proid有值时，调用dao查询数据
        if(strProid != null && strProid.trim().length()>0){
            ProvinceDao dao = new ProvinceDao();
            Province p =dao.queryProvinceByID(Integer.valueOf(strProid));
            //需要使用jackson 把Province对象转化为 json
            ObjectMapper om = new ObjectMapper();
            json = om.writeValueAsString(p);
        }

        //把获取的数据，通过网络传给ajax中的异步对象，响应结果数据
        //指定服务器端(servlet)返回给浏览器的是json格式的数据
        response.setContentType("application/json;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.println(json);
        out.flush();
        out.close();
    }
}

效果截图
在这里插入图片描述
可以成功的根据编号访问到我们数据库的内容

郁闷奶茶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax的两个实现案例

使用Ajax，局部刷新输入身高体重，计算用户的BMI首先编写index.jsp页面<%@ page contentType="text/html;charset=UTF-8" language="java" %><html> <head> <title>局部刷新bmi</title> <script type="text/javascript"> //使用内存的异步对象，代替浏览器发起请求。异步
复制链接

扫一扫