J2EE梳理(九)——Servlet与前后的交互


来源于how2j

利用Servlet+JDBC完成一个CRUD的项目

项目结构

在这里插入图片描述

HeroDao层
  • 在构造函数中初始化jdbc驱动类
  • 将连接数据库的代码抽出来为getConnection
  • Dao层逻辑通过ResultSet接受返回值
  • DAO层代码
public class HeroDAO {
 
    public HeroDAO() {
        try {
            Class.forName("com.mysql.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }
 
    public Connection getConnection() throws SQLException {
        return DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/how2java?characterEncoding=UTF-8", "root",
                "admin");
    }
 
    public int getTotal() {
        int total = 0;
        try (Connection c = getConnection(); Statement s = c.createStatement();) {
 
            String sql = "select count(*) from hero";
 
            ResultSet rs = s.executeQuery(sql);
            while (rs.next()) {
                total = rs.getInt(1);
            }
 
            System.out.println("total:" + total);
 
        } catch (SQLException e) {
 
            e.printStackTrace();
        }
        return total;
    }
 
    public void add(Hero hero) {
 
        String sql = "insert into hero values(null,?,?,?)";
        try (Connection c = getConnection(); PreparedStatement ps = c.prepareStatement(sql);) {
 
            ps.setString(1, hero.name);
            ps.setFloat(2, hero.hp);
            ps.setInt(3, hero.damage);
 
            ps.execute();
 
            ResultSet rs = ps.getGeneratedKeys();
            if (rs.next()) {
                int id = rs.getInt(1);
                hero.id = id;
            }
        } catch (SQLException e) {
 
            e.printStackTrace();
        }
    }
 
    public void update(Hero hero) {
 
        String sql = "update hero set name= ?, hp = ? , damage = ? where id = ?";
        try (Connection c = getConnection(); PreparedStatement ps = c.prepareStatement(sql);) {
 
            ps.setString(1, hero.name);
            ps.setFloat(2, hero.hp);
            ps.setInt(3, hero.damage);
            ps.setInt(4, hero.id);
 
            ps.execute();
 
        } catch (SQLException e) {
 
            e.printStackTrace();
        }
 
    }
 
    public void delete(int id) {
    	System.out.println("delete start");
 
        try (Connection c = getConnection(); Statement s = c.createStatement();) {
 
            String sql = "delete from hero where id = " + id;
 
            s.execute(sql);
 
        } catch (SQLException e) {
 
            e.printStackTrace();
        }
        System.out.println("delete done");
    }
 
    public Hero get(int id) {
        Hero hero = null;
 
        try (Connection c = getConnection(); Statement s = c.createStatement();) {
 
            String sql = "select * from hero where id = " + id;
 
            ResultSet rs = s.executeQuery(sql);
 
            if (rs.next()) {
                hero = new Hero();
                String name = rs.getString(2);
                float hp = rs.getFloat("hp");
                int damage = rs.getInt(4);
                hero.name = name;
                hero.hp = hp;
                hero.damage = damage;
                hero.id = id;
            }
 
        } catch (SQLException e) {
 
            e.printStackTrace();
        }
        return hero;
    }
 
    public List<Hero> list() {
        return list(0, Short.MAX_VALUE);
    }
 
    public List<Hero> list(int start, int count) {
        List<Hero> heros = new ArrayList<Hero>();
 
        String sql = "select * from hero order by id desc limit ?,? ";
 
        try (Connection c = getConnection(); PreparedStatement ps = c.prepareStatement(sql);) {
 
            ps.setInt(1, start);
            ps.setInt(2, count);
 
            ResultSet rs = ps.executeQuery();
 
            while (rs.next()) {
                Hero hero = new Hero();
                int id = rs.getInt(1);
                String name = rs.getString(2);
                float hp = rs.getFloat("hp");
                int damage = rs.getInt(4);
                hero.id = id;
                hero.name = name;
                hero.hp = hp;
                hero.damage = damage;
                heros.add(hero);
            }
        } catch (SQLException e) {
 
            e.printStackTrace();
        }
        return heros;
    }
 
}
HeroListServlet逻辑
  • 页面效果:
    在这里插入图片描述
  • web.xml
    在这里插入图片描述
    所以访问的http://localhost/listHero
  • Servlet代码:
protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html; charset=UTF-8");
         
        List<Hero> heros = new HeroDAO().list();
 
        StringBuffer sb = new StringBuffer();
        sb.append("<table align='center' border='1' cellspacing='0'>\r\n");
        sb.append("<tr><td>id</td><td>name</td><td>hp</td><td>damage</td><td>edit</td><td>delete</td></tr>\r\n");
 		// a href ='editHero?id=%d'即向editHero对应的servlet发送请求,request name = id ,
 		//delete同理
        String trFormat = "<tr><td>%d</td><td>%s</td><td>%f</td><td>%d</td><td><a href='editHero?id=%d'>edit</a></td><td><a href='deleteHero?id=%d'>delete</a></td></tr>\r\n";
 
        for (Hero hero : heros) {
            String tr = String.format(trFormat, hero.getId(), hero.getName(), hero.getHp(), hero.getDamage(),hero.getId(),hero.getId());
             
            sb.append(tr);
        }
 
        sb.append("</table>");
 
        response.getWriter().write(sb.toString());
 
    }
  • <a href='editHero?id=%d'>edit</a></td><td>
  • 先通过在这里插入图片描述找到对应servlet
  • HeroEditServlet代码:
protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
 
        int id = Integer.parseInt(request.getParameter("id"));
 
        Hero hero = new HeroDAO().get(id);
 
        StringBuffer format = new StringBuffer();
        response.setContentType("text/html; charset=UTF-8");
 
        format.append("<!DOCTYPE html>");
 
        format.append("<form action='updateHero' method='post'>");
        format.append("名字 : <input type='text' name='name' value='%s' > <br>");
        format.append("血量 : <input type='text' name='hp'  value='%f' > <br>");
        format.append("伤害: <input type='text' name='damage'  value='%d' > <br>");
        format.append("<input type='hidden' name='id' value='%d'>");
        format.append("<input type='submit' value='更新'>");
        format.append("</form>");
 
        String html = String.format(format.toString(), hero.getName(), hero.getHp(), hero.getDamage(), hero.getId());
 
        response.getWriter().write(html);
 
    }
  • 用request.getParameter取出id,再调用dao层,再通过response返回一个html界面
  • 在这里插入图片描述
  • 对应的<form action='updateHero' method='post'> 向updateHero提交一个Post请求:在这里插入图片描述
  • HeroUpdateServlet代码:
protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
 
        request.setCharacterEncoding("UTF-8");
 
        Hero hero = new Hero();
        hero.setId(Integer.parseInt(request.getParameter("id")));
        hero.setName(request.getParameter("name"));
        hero.setHp(Float.parseFloat(request.getParameter("hp")));
        hero.setDamage(Integer.parseInt(request.getParameter("damage")));
 
        new HeroDAO().update(hero);
 
        response.sendRedirect("/listHero");
 
    }
  • 调用Dao层更新数据后,response.sendRedirect("/listHero");重定向到页面listHero,更新了数据

  • <a href='deleteHero?id=%d'>delete</a> 同理,先去找delete对应的servlet

protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
 
        int id = Integer.parseInt(request.getParameter("id"));
         
        new HeroDAO().delete(id);
 
        response.sendRedirect("/listHero");
         
    }
  • 调用dao后,ListHero

Servlet与JSON交互

向Servlet提交数据

效果:在这里插入图片描述
在这里插入图片描述

  • 用AJAX以JSON方式提交数据

    • submit.html
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>AJAXJSON方式提交数据</title> 
    <script type="text/javascript" src="jquery.min.js"></script> 
    </head> 
    <body> 
        <form > 
           名称:<input type="text" id="name"/><br/> 
            血量:<input type="text" id="hp"/><br/> 
            <input type="button" value="提交" id="sender">  
        </form> 
        <div id="messageDiv"></div> 
           
        <script> 
        $('#sender').click(function(){ 
            var name=document.getElementById('name').value; 
            var hp=document.getElementById('hp').value; 
            var hero={"name":name,"hp":hp}; 
            var url="submitServlet"; 
               
            $.post(
                    url,
                    {"data":JSON.stringify(hero)},
                    function(data) { 
                         alert("提交成功,请在Tomcat控制台查看服务端接收到的数据");
             });  
     
        }); 
        </script> 
    </body> 
       
    </body>
    </html>
    
    • 点击提交之后,把form中的数据取出来,组织成json的格式,用ajax发送出去。

    • 这里用的ajax方式是 jquery的post函数, 请参考:使用post方式提交ajax

    • JSON.stringify函数的作用是将一个javascript对象,转换为JSON格式的字符串。

    • 提交之后,将会看到如图所示的对话框:在这里插入图片描述

  • Servlet把JSON字符串转换为Hero对象

    1. 获取浏览器提交的字符串
    2. 把字符串转换为JSON对象
    3. 把JSON对象转换为Hero对象
      在这里插入图片描述
    • SubmitServlet.java:
    import java.io.IOException;
     
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
     
    import net.sf.json.JSONObject; 
       
    public class SubmitServlet extends HttpServlet { 
        protected void service(HttpServletRequest request, HttpServletResponse response) 
                throws ServletException, IOException {
            String data =request.getParameter("data");
             
            System.out.println("服务端接收到的数据是:" +data);
      
            JSONObject json=JSONObject.fromObject(data); 
              
            System.out.println("转换为JSON对象之后是:"+ json);
               
            Hero hero = (Hero)JSONObject.toBean(json,Hero.class); 
            System.out.println("转换为Hero对象之后是:"+hero);
        } 
    } 
    
    • 将JSON字符串转化为JSON对象,再转换为Hero对象
    从Servlet获取一个对象

    效果:
    在这里插入图片描述->在这里插入图片描述

  • http://localhost/getOne.html :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>用AJAX以JSON方式获取数据</title> 
<script type="text/javascript" src="jquery.min.js"></script> 
</head> 
<body> 
    <input type="button" value="通过AJAX获取一个Hero对象" id="sender">  
   
    <div id="messageDiv"></div> 
       
    <script> 
    $('#sender').click(function(){ 
        var url="getOneServlet"; 
        $.post(
                url,
                function(data) {
                     var json=JSON.parse(data); 
                     var name =json.hero.name; 
                     var hp = json.hero.hp;
                     $("#messageDiv").html("英雄名称:"+name + "<br>英雄血量:" +hp );
                      
         });  
    }); 
    </script> 
</body> 
   
</body>
</html>
  1. 点击按钮之后,通过ajax访问getOneServlet;var url="getOneServlet";
  2. 获取都数据后,通过JSON.parse 转换为json对象var json=JSON.parse(data);
  3. 获取name和hp
  4. 显示在div里
  • GetOneServlet.java
import java.io.IOException;
import java.io.Writer;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import net.sf.json.JSONObject; 
   
public class GetOneServlet extends HttpServlet { 
    protected void service(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
          
        Hero hero = new Hero();
        hero.setName("盖伦");
        hero.setHp(353);
         
        JSONObject json= new JSONObject();
   
        json.put("hero", JSONObject.fromObject(hero));
        response.setContentType("text/html;charset=utf-8"); 
        response.getWriter().print(json);
    } 
} 
  1. 创建一个Hero对象
  2. 创建一个JSONObject 对象
  3. 把Hero对象转换为JSONObject 对象,并放在上一个JSONObject对象上,key是"hero"
  4. 设置编码方式为UTF-8
  5. 通过response返回
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值