网页第十三讲（做登录功能网页）

建好mySQL数据库，在eclipse中导入文件，即可正常运行。登录功能网页可以做到增加、删除、编辑这几个简单的功能。

继续接上一讲完善代码（最终完整版）：

UserServlet.java:

package com.zq.controller;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

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 org.json.JSONObject;

import com.zq.dao.UserDao;
import com.zq.dao.UserDaoImpl;
import com.zq.model.User;

//注解：代替一些配置文件的配置 @WebServlet给前台jsp提供一个访问地址
//http://localhost:8088/MyWeb/user
@WebServlet("/user")
public class UserServlet extends HttpServlet {
    //因为下面每个操作都会实例化这个类，所以写成成员变量
    UserDao userDao = new UserDaoImpl();    
    
    @Override
    public void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        //业务逻辑代码
        System.out.println("进来了");
        //1、获取从前台或从浏览器地址传进来的参数
        //HttpServletRequest 里面存有前台传来的参数；可以往前台页面上传数据；执行页面的跳转serlvet类里面跳到某个页面
        //HttpServletResponse 主要有个作用可以直接返回数据，不需要跟着页面传输数据
        String action = req.getParameter("action");
        
        //null.equals
        //http://localhost:8088/MyWeb/user?action=toLogin&username=zq&pwd=123
        if(null!=action && action.equals("toLogin")){//从系统上的注销操作，跳转到登陆页面
            //跳到页面时，想传递一个数据；第一个参数放传递数据变了的名字，第二个参数传递的数据的值
            req.setAttribute("msg", "今天天气真好啊");
            //也可以传任何对象Object
            Map<String,String> map =new HashMap<String,String>();
            map.put("name", "zq");
            map.put("age", "22");
            req.setAttribute("map", map);
            //requst跳转到某个页面代码
            req.getRequestDispatcher("index.jsp").forward(req, resp);
        }else if(action.equals("del")){
            //页面保持不动的情况，向后台发一请求，ajax请求，局部刷新，页面不动；
            //如果是<a>超链接的跳转，都是直接整个页面都刷新、跳转了，那种不是ajax请求
            //ajax请求返回前台的只是一个数据结果，不需要跳转页面
            Integer id = Integer.parseInt(req.getParameter("id"));//默认得到String,强制转换类型
            
            boolean isOk = userDao.del(id);            
            //ajax请求来的，需要只返回数据，不跳转页面
            resp.setContentType("text/html;charset=utf-8");//设置页面显示的数据是中文编码方式，不然会乱码
            PrintWriter out = resp.getWriter();
            out.print(isOk?"删除成功":"删除失败");
            out.flush();
            out.close();
        }else if(action.equals("findById")){
            Integer id = Integer.parseInt(req.getParameter("id"));//默认得到String,强制转换类型
            
            User user = userDao.findById(id);
            //user返回到前台，ajax获取到以后，放到编辑页面的具体文本框里
            //user对象是java的类，js没有类这个类型，user转成json格式
            JSONObject userJson = new JSONObject(user);
                
            //ajax请求来的，需要只返回数据，不跳转页面
            resp.setContentType("text/html;charset=utf-8");//设置页面显示的数据是中文编码方式，不然会乱码
            PrintWriter out = resp.getWriter();
            out.print(userJson);
            out.flush();
            out.close();
        }else if(action.equals("save")){
            Integer id = Integer.parseInt(req.getParameter("id"));//默认得到String,强制转换类型
            String username = req.getParameter("username");
            String pwd = req.getParameter("pwd");
            
            User user = new User(id,username,pwd);
            boolean isOk = false;
            
            //做个判断，判断是新增还是修改
            if(id==0){//新增
                isOk = userDao.add(user);        
            }else{
                isOk = userDao.update(user);    
            }
                
            //ajax请求来的，需要只返回数据，不跳转页面
            resp.setContentType("text/html;charset=utf-8");//设置页面显示的数据是中文编码方式，不然会乱码
            PrintWriter out = resp.getWriter();
            out.print(isOk);
            out.flush();
            out.close();
        }else if(action.equals("list")){//如果是登陆操作
            //跳转到user.jsp那个页面上，并且展示出来页面的列表数据（user表里面那3条数据）
            //1、先去数据库查询user表里的所有数据
            List<User> list = userDao.list();
            //2、将查询出的结果返回到jsp页面
            req.setAttribute("list", list);
            //3、跳转到具体jsp页面==user.jsp
            req.getRequestDispatcher("user.jsp").forward(req, resp);
        }else if(action.equals("login")){//如果是登陆操作
            String username = req.getParameter("username");
            String pwd = req.getParameter("pwd");
            
            //改成调用userDao里面login判断是否登陆成功
            boolean isLogin = userDao.login(username, pwd);
            
            if(isLogin){
                //跳转到user.jsp那个页面上，并且展示出来页面的列表数据（user表里面那3条数据）
                //1、先去数据库查询user表里的所有数据
                List<User> list = userDao.list();
                //2、将查询出的结果返回到jsp页面
                req.setAttribute("list", list);
                //3、跳转到具体jsp页面==user.jsp
                req.getRequestDispatcher("user.jsp").forward(req, resp);
                
            }else{
                //跳回到登陆页面，并且告诉登录那个人，你用户名或密码输错了
                req.setAttribute("msg", "您的用户名或密码输入错误");
                req.getRequestDispatcher("index.jsp").forward(req, resp);
            }            
        }
        
    }
    
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        System.out.println("调用doPost了");
        doGet(req, resp);
    }
}
 

 

 

 

UserDao.java:

 

package com.zq.dao;

import java.util.List;

import com.zq.model.User;

public interface UserDao {
    public boolean login(String username,String pwd);

    public List<User> list();

    public boolean del(Integer id);

    public boolean add(User user);

    public boolean update(User user);

    public User findById(Integer id);
}
 

 

 

 

 

UserDaoImpl.java:

package com.zq.dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.zq.model.User;

public class UserDaoImpl implements UserDao {

    @Override
    public boolean login(String username, String pwd) {
        //写连接数据库，查询用户名密码是否正确的操作
        Connection conn = null;
        PreparedStatement pst = null;//因为最后需要关闭，所以写在最上面，不然try里面内容，
        //Statement，但是不太常用，拼装带参数的sql比较麻烦
        //finally里面调不到
        ResultSet rs = null;
        
        //1、引入具体的数据库jar包
        try{
            //2、注册/安装数据库的驱动程序/类
            Class.forName("com.mysql.jdbc.Driver");
            //3、创建数据库连接，连接数据库：哪个数据库、用户名、密码多少
            conn = DriverManager.getConnection(
                    "jdbc:mysql://localhost:3306/myweb","root","");//机房的密码为空
            
            //4、sql语句,并且对数据库执行下sql语句：查询返回结果、删除、更新
            String sql = "select * from user where username = ? and pwd = ?";
            pst = conn.prepareStatement(sql);
            //穿进去用户名和密码
            pst.setString(1, username);
            pst.setString(2,pwd);
            
            //5、如果是查询，需要获取查询结果
            rs = pst.executeQuery();
            
            //判断查询到的结果集里面是否有数据
            if(rs.next()){//存的是0或者1条，所有获取结果集用的if，但是多条while，循环结果集里的数据
                User user = new User();
                //把结果集里取到的信息塞到user里
                user.setId(rs.getInt(1));//按查询出来列的顺序取得，第1列是id，
                //getString("username")这个username是数据库表的列名或者查询时取得别名
                //select username as name from user;
                user.setUsername(rs.getString("username"));//getString(2)
                user.setPwd(rs.getString(3));
                return true;
            }else{
                return false;
            }        
        }catch(Exception e){
            e.printStackTrace();
        }finally{            
            //6、关闭数据库连接的这些对象，释放缓存
            //倒着关闭，就是先建立的数据库连接connetction,那就最后关；最后建的结果集ResultSet，就应该最先关闭
            try {
                if(rs!=null){
                    rs.close();
                }
                if(pst!=null){
                    pst.close();
                }
                if(conn!=null){
                    conn.close();
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return false;
    }

    @Override
    public List<User> list() {
        //写连接数据库，查询用户名密码是否正确的操作
        Connection conn = null;
        PreparedStatement pst = null;//因为最后需要关闭，所以写在最上面，不然try里面内容，
        //Statement，但是不太常用，拼装带参数的sql比较麻烦
        //finally里面调不到
        ResultSet rs = null;
        //查询结果需要返回的数据，放在list里面
        List<User> list = new ArrayList<User>();
        
        //1、引入具体的数据库jar包
        try{
            //2、注册/安装数据库的驱动程序/类
            Class.forName("com.mysql.jdbc.Driver");
            //3、创建数据库连接，连接数据库：哪个数据库、用户名、密码多少
            conn = DriverManager.getConnection(
                    "jdbc:mysql://localhost:3306/myweb","root","");//机房的密码为空
            
            //4、sql语句,并且对数据库执行下sql语句：查询返回结果、删除、更新
            String sql = "select * from user";//查询表里的所有数据，列表展示要用的
            pst = conn.prepareStatement(sql);            
            //5、如果是查询，需要获取查询结果
            rs = pst.executeQuery();
            
            //判断查询到的结果集里面是否有数据
            while(rs.next()){//存的是0或者1条，所有获取结果集用的if，但是多条while，循环结果集里的数据
                User user = new User();
                //把结果集里取到的信息塞到user里
                user.setId(rs.getInt(1));//按查询出来列的顺序取得，第1列是id，
                user.setUsername(rs.getString("username"));//getString(2)
                user.setPwd(rs.getString(3));
                //将从rs中循环出来的这一行数据放到list里面，
                list.add(user);
            }        
        }catch(Exception e){
            e.printStackTrace();
        }finally{            
            //6、关闭数据库连接的这些对象，释放缓存
            //倒着关闭，就是先建立的数据库连接connetction,那就最后关；最后建的结果集ResultSet，就应该最先关闭
            try {
                if(rs!=null){
                    rs.close();
                }
                if(pst!=null){
                    pst.close();
                }
                if(conn!=null){
                    conn.close();
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return list;
    }

    @Override
    public boolean del(Integer id) {
        //写连接数据库，查询用户名密码是否正确的操作
        Connection conn = null;
        PreparedStatement pst = null;//因为最后需要关闭，所以写在最上面，不然try里面内容，
        //Statement，但是不太常用，拼装带参数的sql比较麻烦
        //finally里面调不到
        ResultSet rs = null;
        
        //1、引入具体的数据库jar包
        try{
            //2、注册/安装数据库的驱动程序/类
            Class.forName("com.mysql.jdbc.Driver");
            //3、创建数据库连接，连接数据库：哪个数据库、用户名、密码多少
            conn = DriverManager.getConnection(
                    "jdbc:mysql://localhost:3306/myweb","root","");//机房的密码为空
            
            //4、sql语句,并且对数据库执行下sql语句：查询返回结果、删除、更新
            String sql = "delete from user where id = ?";
            pst = conn.prepareStatement(sql);
            //穿进去用户名和密码
            pst.setInt(1, id);            
            //5、如果是查询，需要获取查询结果
            int n = pst.executeUpdate();//执行更新操作，返回执行成功的数据条数            
            if(n>0){
                return true;
            }else{
                return false;
            }        
        }catch(Exception e){
            e.printStackTrace();
        }finally{            
            //6、关闭数据库连接的这些对象，释放缓存
            //倒着关闭，就是先建立的数据库连接connetction,那就最后关；最后建的结果集ResultSet，就应该最先关闭
            try {
                if(rs!=null){
                    rs.close();
                }
                if(pst!=null){
                    pst.close();
                }
                if(conn!=null){
                    conn.close();
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return false;
    }

    @Override
    public boolean add(User user) {
        //写连接数据库，查询用户名密码是否正确的操作
        Connection conn = null;
        PreparedStatement pst = null;//因为最后需要关闭，所以写在最上面，不然try里面内容，
        //Statement，但是不太常用，拼装带参数的sql比较麻烦
        //finally里面调不到
        ResultSet rs = null;
        
        //1、引入具体的数据库jar包
        try{
            //2、注册/安装数据库的驱动程序/类
            Class.forName("com.mysql.jdbc.Driver");
            //3、创建数据库连接，连接数据库：哪个数据库、用户名、密码多少
            conn = DriverManager.getConnection(
                    "jdbc:mysql://localhost:3306/myweb","root","");//机房的密码为空
            
            //4、sql语句,并且对数据库执行下sql语句：查询返回结果、删除、更新
            String sql = "insert into user(username,pwd) values(?,?)";
            pst = conn.prepareStatement(sql);
            //穿进去用户名和密码
            pst.setString(1, user.getUsername());
            pst.setString(2, user.getPwd());
            //5、如果是查询，需要获取查询结果
            int n = pst.executeUpdate();//执行更新操作，返回执行成功的数据条数            
            if(n>0){
                return true;
            }else{
                return false;
            }        
        }catch(Exception e){
            e.printStackTrace();
        }finally{            
            //6、关闭数据库连接的这些对象，释放缓存
            //倒着关闭，就是先建立的数据库连接connetction,那就最后关；最后建的结果集ResultSet，就应该最先关闭
            try {
                if(rs!=null){
                    rs.close();
                }
                if(pst!=null){
                    pst.close();
                }
                if(conn!=null){
                    conn.close();
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return false;
    }

    @Override
    public boolean update(User user) {
        //写连接数据库，查询用户名密码是否正确的操作
        Connection conn = null;
        PreparedStatement pst = null;//因为最后需要关闭，所以写在最上面，不然try里面内容，
        //Statement，但是不太常用，拼装带参数的sql比较麻烦
        //finally里面调不到
        ResultSet rs = null;
        
        //1、引入具体的数据库jar包
        try{
            //2、注册/安装数据库的驱动程序/类
            Class.forName("com.mysql.jdbc.Driver");
            //3、创建数据库连接，连接数据库：哪个数据库、用户名、密码多少
            conn = DriverManager.getConnection(
                    "jdbc:mysql://localhost:3306/myweb","root","");//机房的密码为空
            
            //4、sql语句,并且对数据库执行下sql语句：查询返回结果、删除、更新
            String sql = "update user set username = ?,pwd=? where id = ?";
            pst = conn.prepareStatement(sql);
            //穿进去用户名和密码
            pst.setString(1, user.getUsername());    
            pst.setString(2, user.getPwd());    
            pst.setInt(3, user.getId());            
            //5、如果是查询，需要获取查询结果
            int n = pst.executeUpdate();//执行更新操作，返回执行成功的数据条数            
            if(n>0){
                return true;
            }else{
                return false;
            }        
        }catch(Exception e){
            e.printStackTrace();
        }finally{            
            //6、关闭数据库连接的这些对象，释放缓存
            //倒着关闭，就是先建立的数据库连接connetction,那就最后关；最后建的结果集ResultSet，就应该最先关闭
            try {
                if(rs!=null){
                    rs.close();
                }
                if(pst!=null){
                    pst.close();
                }
                if(conn!=null){
                    conn.close();
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return false;
    }

    @Override
    public User findById(Integer id) {
        //写连接数据库，查询用户名密码是否正确的操作
        Connection conn = null;
        PreparedStatement pst = null;//因为最后需要关闭，所以写在最上面，不然try里面内容，
        //Statement，但是不太常用，拼装带参数的sql比较麻烦
        //finally里面调不到
        ResultSet rs = null;
        
        //1、引入具体的数据库jar包
        try{
            //2、注册/安装数据库的驱动程序/类
            Class.forName("com.mysql.jdbc.Driver");
            //3、创建数据库连接，连接数据库：哪个数据库、用户名、密码多少
            conn = DriverManager.getConnection(
                    "jdbc:mysql://localhost:3306/myweb","root","");//机房的密码为空
            
            //4、sql语句,并且对数据库执行下sql语句：查询返回结果、删除、更新
            String sql = "select * from user where id = ?";
            pst = conn.prepareStatement(sql);
            //穿进去用户名和密码
            pst.setInt(1, id);
            
            //5、如果是查询，需要获取查询结果
            rs = pst.executeQuery();
            
            //判断查询到的结果集里面是否有数据
            if(rs.next()){//存的是0或者1条，所有获取结果集用的if，但是多条while，循环结果集里的数据
                User user = new User();
                //把结果集里取到的信息塞到user里
                user.setId(rs.getInt(1));//按查询出来列的顺序取得，第1列是id，
                //getString("username")这个username是数据库表的列名或者查询时取得别名
                //select username as name from user;
                user.setUsername(rs.getString("username"));//getString(2)
                user.setPwd(rs.getString(3));
                return user;
            }else{
                return null;
            }        
        }catch(Exception e){
            e.printStackTrace();
        }finally{            
            //6、关闭数据库连接的这些对象，释放缓存
            //倒着关闭，就是先建立的数据库连接connetction,那就最后关；最后建的结果集ResultSet，就应该最先关闭
            try {
                if(rs!=null){
                    rs.close();
                }
                if(pst!=null){
                    pst.close();
                }
                if(conn!=null){
                    conn.close();
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return null;
    }
}
 

 

 

 

 

User.java:

 

package com.zq.model;

public class User {
    private Integer id;//主键
    private String username;//用户名
    private String pwd;//密码
    
    
    public User() {
        super();
    }
    public User(Integer id, String username, String pwd) {
        super();
        this.id = id;
        this.username = username;
        this.pwd = pwd;
    }
    
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPwd() {
        return pwd;
    }
    public void setPwd(String pwd) {
        this.pwd = pwd;
    }    
}
 

 

 

 

 

 

 

index.jsp:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 引入自定义的css样式 -->
<link href="public.css" type="text/css" rel="stylesheet" />
<title>首页</title>
</head>
<body>
<img src="img/logBanner.png" style="width:100%;height:100%;"/>
<div id="loginDiv">
    <p class="logTitle">登录</p>
    <form action="user" method="post"><!-- action告诉程序你要提交后台servelet类的地址 -->
    <!-- 填写的的纸质表格的信息，在页面展示都要放上form标签里面 -->
        
        <!-- 隐藏的文本域，一般用来传递你当前的操作名字， 不需要给客户展示的信息-->
        <!-- 此action自定义的，随便叫啥都行 -->
        <input type="hidden" name="action" value="login" />
        
        <!-- 颜色：#RGB 0-9abcdef -->
        <span style="color:#f00;">${msg }</span>
        
        <div class="formInput">
            <span>用户名</span>
            <!-- input标签用来 type="text"展示文本框的，可以输入的 -->
            <input type="text" name="username" />
        </div>
        <div class="formInput">
            <span>密码</span>
            <!-- input标签用来 password类型看不见输入的字是什么 -->
            <input type="password" name="pwd" />
        </div>
        <input type="submit" class="formButton" value="登陆" />
    </form>
</div>

<%-- <!-- 接受别人jsp传来的、servlet类传来的数据 -->
<!-- 1、常用EL表达式 -->
<span>${msg }</span><p></p>
<span>${map.name}</span><p></p>

<!-- 2、有点麻烦，最原始的方法 jsp里面内置request、respense这样的对象/类 -->
<span><%=request.getAttribute("msg") %></span> --%>
</body>
</html>

 

 

 

 

 

 

public.css:

 

@charset "utf-8";
/* CSS Document */
/* 基础选择器：id选择器#  class选择器 .  标签选择器 */
/* *通配符选择器，就是应用在html所有标签，所有空白都清空 */
*{
    padding:0px;
    margin:0px;
}

.banner{
    width:100%;
    height:100px;
    background-image:url(img/bgTitle.png);
    /*background-color:#FF6633;*/
}
.title{
    position: absolute;/* 绝对位置，针对父标签的位置；fixed,相对浏览器的 */
    top: 60px;
    right: 30px;/* 设置绝对位置，可以设置上边top、right、left、bottom */
    color:#FFFFFF;
    font-weight:bolder;
    font-size:16px;
}

#main{
    background-color:#EFEFEF;/* 浅灰 */
}
#left{
    width:12%;
    height:900px;
    background-color:#F2F2F2;
    float:left;/* 为了让div左右排列 */
    border-right: 1px solid #dedede;
    padding-bottom:100px;
}
#left ul{
    list-style:none;/* 去掉默认的小黑点 */
    width:100%;    
}
#left ul li{
    height:70px;
    line-height:70px;/* 垂直居中 */
    background-color:#F9F9F9;
    border-bottom: 1px solid #dedede;/* 设置下边 */
    text-align:center;
    position:relative;/* 相对位置，是为了里面那个小图标的位置 固定*/
}
#left ul li:hover{
    background-color:#FFFFFF;
}
.icon1{
    position: absolute;
    left: 30px;
    top:25px;
    display:block;/* 改成盒子模型，可以使一些例如left、top、margin这些样式管用，例如span也不是盒子模型 */
}
#left ul li a{
    text-decoration:none;/* 去下划线 */
    color:#666666;
}
#left ul li a:hover{
    color:#FF6633;
}

#right{
    float:left;
    width:86%;
    /*height:1300px;*/
    background-color:#fff;
    padding:10px;
}

#loginDiv{
    
    width:300px;
    background-color:#FFFFFF;
    padding:30px;
    position:fixed;
    right: 20%; 
    top: 25%;
    border: 1px solid #CCC;
}

.box{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    display: none;
}

.logTitle{
    height:40px;
    border-bottom:#ffb447 solid 1px;
    font-size:28px;
    margin-bottom:40px;
}
.formInput{
    margin-bottom:20px;
    height:40px;
    width:100%;
}
.formInput img{
    position: absolute;
    padding-top: 12px;
    padding-left: 8px;
}
.formInput input,select{
    font-size:16px;
    width:100%;
    text-indent:5em;
    height:40px;
}

.formInput span{
    color:#999999;
    position: absolute;
    padding-top: 12px;
    padding-left: 8px;
}
.formButton {
    margin-top: 20px;
    border: 0px;
    font-size: 18px;
    width: 100%;
    height: 40px;
    background-color:#ffb447;
    color:#FFFFFF;
}

 

 

 

 

 

User.jsp:

 

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!-- 引入jstl自定义的c标签 -->

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户列表</title>
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script> 
<!-- 引入自己的css -->
<link href="public.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
function showAddDiv(){
    $(".box").show();//显示div
    //document.getElementById("divId").style.display="block";
}

function edit(id){
    $.ajax({
        type:"get",
        url:"user",
        data:{"id":id,"action":"findById"},
        success:function(data){
            var obj = JSON.parse(data);
            alert(obj.id);
            $("#id").val(obj.id);
            $("#username").val(obj.username);
            $("#pwd").val(obj.pwd);
            $(".box").show();
        }
    });
}

function deleteUser(id){
    //弹出框：alert（1个确定按钮）、confirm（2个按钮，）、自动弹出框
    var isDelete = confirm("您确定要删除吗？");
    if(isDelete){
        $.post("user",{"id":id,"action":"del"},
                function(data){
            if(data){
                alert("删除成功");
                window.location.reload();
            }else{
                alert("删除失敗");
            }    
        })
    }
}

//保存
function create(){
    //alert("新增提交的数据："+$("#saveForm").serialize());
    $.post("user",
            $("#saveForm").serialize(),function(data){//form表单参数可以直接通过这种提交
                if(data){
                    alert("保存成功");
                    window.location.reload();
                }else{
                    alert("失敗");
                }        
    });
}

</script>
</head>
<body>
    <!-- 划分区域 div -->
    <div class="banner"><!-- 上面那个图片部分 -->
        <div class="title">
            欢迎，<span id="user">赵琦</span><a href="#">退出</a>
        </div>
    </div>
    
    <!-- 下面主体部分 -->
    <div id="main">
        <div id="left">
            <ul><!-- http://localhost:8088/shop/menu/list.do -->
                <li>
                    <img class="icon1" src="img/icon01.png" />
                    <a href="user?action=list">用户管理</a>
                </li>
                <li>
                    <img class="icon1" src="img/icon04.png" />
                    <a href="grade?action=list">年级管理</a>
                </li>
                <li>
                    <img class="icon1" src="img/icon03.png" />
                    <a href="class?action=list">班级管理</a>
                </li>
                <li>
                    <img class="icon1" src="img/icon02.png" />
                    <a href="user?action=toLogin">退出系统</a>
                </li>
            </ul>
        </div>
        <!-- 列表 -->
        <div id="right">
            <button type="button" class="btn btn-primary" οnclick="showAddDiv()">新增</button>
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>用户名</th>
                        <th>密码</th>
                        <th>删除</th>
                        <th>编辑</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- EL表达式-翻课本 -->
                    <!-- List<User> row.id 这个id就是后台传来的User里面的属性名  -->
                    <c:forEach items="${list }" var="row">
                        <tr>
                            <td>${row.id }</td>
                            <td>${row.username }</td>
                            <td>${row.pwd }</td>
                            <td><a href="#" class="btn btn-primary" οnclick="deleteUser(${row.id})">删除</a></td>
                            <td><a href="#" class="btn btn-primary" οnclick="edit(${row.id})">编辑</a></td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
    
    <div class="box">
        <div id="loginDiv" style="right:50% !important;">
            <p class="logTitle">新增</p>
            <div>
                <form id="saveForm">
                    <input type="hidden" name="id" id="id" value="0" />
                    <input type="hidden" name="action" id="action" value="save" />
                    <div class="formInput">
                        <img src="img/icon01.png" />
                        <input type="text" name="username" id="username"
                            placeholder="" />
                    </div>
                    <div class="formInput">
                        <span>密码：</span> <input type="password" name="pwd" id="pwd"
                            placeholder="" />
                    </div>
                    <input class="formButton" style="width:40% !important;" type="button" value="保存"
                        onClick="create()" />
                    <input class="formButton" style="width:40% !important;" type="button" value="关闭"
                        onClick="closeDiv()" />
                    <script>
                        function closeDiv(){
                            $(".box").hide();
                        }
                    </script>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

 

转载于:https://my.oschina.net/u/4090401/blog/3060459