Layui和Ajax实现内容的替换

最新推荐文章于 2024-02-22 10:18:29 发布

Java程序猿哦~

最新推荐文章于 2024-02-22 10:18:29 发布

阅读量594

点赞数

文章标签： ajax layui jquery

本文链接：https://blog.csdn.net/m0_64896985/article/details/122461673

版权

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all">
</head>
<body>
<script src="plugins/layui/layui.js"></script>
<script>
layui.use(['table','layer'],function (){
   var table=layui.table;
   var layer=layui.layer;
   var $=layui.jquery;
   table.on('tool(test)',function (obj){
       var value=obj.value;
       var data=obj.data;
       var field=obj.field;
       layEvent=obj.event;
       if(layEvent=="UpdBui"){
        layer.open({
           type:2,
           title:"修改宿管",
           content:"UpdBui?id="+data.building_ID,
           area:['400px','600px'],
           shade:0.4,
            maxmin:true,
            end:function (){
                location.reload();
            }
        });
       }
   });
});
</script>
<table class="layui-table" lay-data="{height:315, url:'buildingServlet', page:true, id:'test'}" lay-filter="test" id="test">
    <thead>
    <tr>
        <th lay-data="{field:'building_ID', width:100, sort: true}">ID</th>
        <th lay-data="{field:'building_Name', width:150,edit:true}">楼层</th>
        <th lay-data="{field:'building_Introduction', width:150,edit:true}">备注</th>
        <th lay-data="{field:'teacherName', width:150,edit:true}">宿管姓名</th>
        <th lay-data="{title:'操作',alige:'center',width:400,toolbar:'#formDemo'}">操作</th>
    </tr>
    </thead>
</table>
<script type="text/html" id="formDemo">
    <a class="layui-btn layui-btn-xs" lay-event="UpdBui">更改宿管</a>
    <a class="layui-btn layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger" lay-event="deleted">删除</a>
    <a class="layui-btn layui-btn-warm" lay-event="add">添加</a>
</script>
</body>

</html>

以json的形式把数据传送到展示页面进行展示

@WebServlet(name = "BuildingServlet", value = "/buildingServlet")
public class BuildingServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String limit=request.getParameter("limit");
    String page=request.getParameter("page");
    BuildingDao bui=new buildingImDao();
    int count=bui.BuildCount();
    List<building> list=bui.AllBuilding(Integer.parseInt(limit),Integer.parseInt(page));
    JSONObject json=new JSONObject();
    json.put("msg","");
    json.put("count",count);
    json.put("code",0);
    json.put("data",JSONObject.toJSON(list));
        System.out.println(json.toString());
        response.getWriter().write(json.toString());
    }

把查询出的内容存储到session作用域中

@WebServlet(name = "UpdBuiServlet", value = "/UpdBui")
public class UpdBuiServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String id=request.getParameter("id");
    request.getSession().setAttribute("id",id);
        TeacherDao te=new teacherImDao();
        List<teacher> teaList=te.teaAll();
        request.getSession().setAttribute("teaList",teaList);
        response.sendRedirect("UpdBui.jsp");
    }

把内容使用JSTL遍历循环展示到下拉菜单中

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>Title</title>
  <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all">
</head>
<body>
<script src="plugins/layui/layui.js"></script>
<script type="text/javascript">
  layui.use(['form','layer'],function (){
  var form=layui.form;
  var layer=layui.layer;
  var $=layui.jquery;
  var index=parent.layer.getFrameIndex(window.name);

  form.on("submit(BuiDemo)",function (data){
    $.ajax({
      url:"updBuiTeacherName?id="+$("[name=Buiid]").val()+"&teacherid="+$("[name=teacherid]").val(),
      type:"post",
      dataType:"text",
      success:function (data){
        if(data==1){
          layer.msg("指派成功");
          parent.layer.close(index);
        }
      }
    });
    return false;
  });
  });
</script>
<form class="layui-form layui-form-pane"action="#"method="post">
  <div class="layui-form-item">
    <label class="layui-form-label">指派宿管</label>
    <div class="layui-input-block">
      <select name="teacherid">
        <c:forEach items="${teaList}" var="t" >
          <option value="${t.teacher_ID}">${t.teacher_Name}</option>
        </c:forEach>
      </select>
    </div>
  </div>
  <input type="hidden" name="Buiid"value="${id}">
  <div class="layui-form-item">
    <button class="layui-btn layui-btn-fluid layui-btn-radius" lay-submit lay-filter="BuiDemo">提交</button>
  </div>
</form>
</body>
</html>

修改为选择的内容

@WebServlet(name = "UpdBuiTeacherNameServlet", value = "/updBuiTeacherName")
public class UpdBuiTeacherNameServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String Buiid=request.getParameter("id");
        String teacherid=request.getParameter("teacherid");
        building bu=new building(Integer.parseInt(Buiid),Integer.parseInt(teacherid));
        BuildingDao bui=new buildingImDao();
        int count=bui.UpdTacherName(bu);
        if (count>0){
            response.getWriter().write("1");
        }
    }
}

方法的重写

public class buildingImDao implements BuildingDao {
    @Override
    public List<building> AllBuilding() {
        Connection con= DBHelper.getConn();
        List<building> list=new ArrayList<>();
        building bu=null;
        String sql="select b.Building_ID,b.Building_Name,b.Building_Introduction,t.Teacher_Name from building b LEFT JOIN  teacher t on b.teacherId=t.Teacher_ID";
        try {
            PreparedStatement ps=con.prepareStatement(sql);
            ResultSet rs=ps.executeQuery();
            while (rs.next()){
                bu=new building(rs.getInt(1),rs.getString(2),rs.getString(3),rs.getString(4));
                list.add(bu);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }

        return list;
    }

    @Override
    public int BuildCount() {
        Connection con= DBHelper.getConn();
        int count=0;
        String sql="select count(*) from building";
        try {
            PreparedStatement ps=con.prepareStatement(sql);
            ResultSet rs=ps.executeQuery();
            if (rs.next()){
                count=rs.getInt(1);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }

        return count;
    }

    @Override
    public int UpdTacherName(building b) {
        Connection con= DBHelper.getConn();
        int count=0;
        String sql="update building set teacherId=? where Building_ID=?";
        try {
            PreparedStatement ps=con.prepareStatement(sql);
            ps.setInt(1,b.getTeacherId());
            ps.setInt(2,b.getBuilding_ID());
            count=ps.executeUpdate();
        } catch (SQLException e) {
            e.printStackTrace();
        }

        return count;
    }

    @Override
    public List<building> AllBuilding(int pageSize, int pageCode) {
        Connection con= DBHelper.getConn();
        List<building> list=new ArrayList<>();
        building bu=null;
        String sql="select b.Building_ID,b.Building_Name,b.Building_Introduction,t.Teacher_Name from building b LEFT JOIN  teacher t on b.teacherId=t.Teacher_ID limit ?,?";
        try {
            PreparedStatement ps=con.prepareStatement(sql);
            ps.setInt(1,(pageCode-1)*pageSize);
            ps.setInt(2,pageSize);
            ResultSet rs=ps.executeQuery();
            while (rs.next()){
                bu=new building(rs.getInt(1),rs.getString(2),rs.getString(3),rs.getString(4));
                list.add(bu);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }

        return list;
    }
}

Java程序猿哦~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Layui和Ajax实现内容的替换

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>Title</title> <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all"></head><body><script s.
复制链接

扫一扫