今日学习笔记

添加用户

将页面信息利用弹窗、单选列表和下拉列表的形式表现

addUser.jsp

<form id="form" method="post" action="<%=path%>/userServlet">
    用户ID：<input type="text" id="userId" name="userId" /><br>
    登录密码：<input type="password" id="userPassword" name="userPassword" /><br>
    用户姓名：<input type="text" id="userName" name="userName" /><br>
    角色：<select id="roleID" name="roleId">
        <option value="">请选择</option>
        <option value="1">系统管理员</option>
        <option value="2">普通用户</option>
    </select><br>
    <button type="button" onclick="add();" >添 加</button>
    <button type="button" onclick="cancel();" >取 消</button>
    </form>
</body>
</html>

<script>
    function add() {

    }
    
    function cancel() {

      window.location.href = "<%=path%>/userServlet";

    }
</script>
设置绝对路径的过程要在Servlet中做好相应的get对应，如果没有需要编写相对的doget或dopost

function add() {
    var userId = document.getElementById("userId").value;
    var userpassword = document.getElementById("userpassword").value;
    var roleID = document.getElementById("roleID").value;
    if(userId == null || userId == '') {
        alert("请输入用户名");
        return;
    }
    if(userpassword == null || userpassword == '') {
        alert("请输入密码");
        return;
    }
    if(roleID == null || roleID == '') {
        alert("请选择角色");
        return;
    }
    
}
判断用户名是否重复
利用Ajax选择返回语句

1.创建一个XMLHttpRequest异步对象

2.设置请求方式和请求地址

3.接着，用send发送请求

4.监听状态变化

5.最后，接收返回的数据

function getDataByAjax(url,params) {
    var ajaxObj = null;
    if (window.ActiveXObject) {
        ajaxObj = new ActiveXObject("Microsoft.XTMLHTTP");//如果是低端版本的IE浏览器
    }else {
        ajaxObj = new XMLHttpRequest();//其他高版本浏览器，
    }
    ajaxObj.open('POST', url, false);//post是方法、url是之前回传的值，false是同步异步
    ajaxObj.setRequestHeader("content-Type", "application/x-www-form-urlencoded");
    ajaxObj.send(params);
    return ajaxObj.responseText;
知识点：
①同步异步
同步是按照顺序一个一个来，不会乱掉，更不会出现上面代码没有执行完就执行下面的代码；缺点是解析的速度没有异步的快；
异步是接取一个任务，直接给后台，在接下一个任务，一直一直这样，谁的先读取完先执行谁的；缺点是没有顺序，谁先读取完先执行谁的，会出现上面的代码还没出来下面的就已经出来了，会报错
这里要求返回数值要按照顺序，所以要实现同步false

②params传参和query传参
当使用params方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应。使用query方法，就没有这种限制，直接在跳转里面用就可以。
注意：如果路由上面不写参数，也是可以传过去的，但不会在url上面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候参数会丢失，那依赖这个参数的http请求或者其他操作就会失败

传参

var url = '<%=path%>/userServlet', params='userId='+userId;
var ret = getDataByAjax(url, params);

因为之后的用户信息、回填等操作都要在servlet中进行，所以要在servlet的post中编写一个标志类

String type = req.getParameter("type");
    try {
    switch (type){
        case "1": //save
            break;
        case "2"://edit
            break;
        case "3"://delete
            break;
        case "4"://verify
            break;
        default://enquire
            List<User> list;
            list = userService.queryUsers();
            req.setAttribute("userList", list);
            req.getRequestDispatcher("/pages/user/userList.jsp").forward(req, resp);
        }
    } catch (SQLException throwables) {
        throwables.printStackTrace();
    }
}
调用验证
获取userid并根据userid查询user

String userId = req.getParameter("userId");
User user = userService.queryUserById(userId);
if (user == null) {
    resp.getWriter().print("1");//无重复
}else {
    resp.getWriter().print("2");//有重复

验证用户角色时，用户角色为必填项

String roleIdStr = req.getParameter("roleId");
if (roleIdStr == null){
    user.setRoleId(2);
} else {
    user.setRoleId(Integer.valueOf(roleIdStr));
}
调用userdao添加用户

void adduser(User user) throws SQLException;
在Impl中实现
（这里可以用Ctrl+I快捷键）

StringBuffer sql = new StringBuffer("insert into userInfo(userId,userName,userPassword,roleId) values(");
sql.append("'" + user.getUserId() + "',");
sql.append("'" + user.getUserName() + "',");
sql.append("'" + user.getUserPassword() + "',");
sql.append( user.getRoleId() );
sql.append(")");