海阔天空

手机扫码查看

2020javaweb教程之利用jQueryAjax查询数据和删除数据

查询所有：

html：

<a href="add.jsp">添加用户</a>
<div id="div1">
    <table>
        <tbody id="a">
        <tr>
            <th>编号</th>
            <th>用户名</th>
            <th>密码</th>
            <th>权限</th>
            <th>操作</th>
        </tr>
        </tbody>
        <tbody id="b"></tbody>
    </table>
</div>
<button onclick="gets()">获取最新</button>

script：

<script>
    var count=0;
    function gets(){
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                var objs=JSON.parse(xhr.responseText);
                if(xhr.responseText=="bad"){
                    alert("查询失败");
                }else{
                    var b=document.getElementById("b");
                    var tr=document.createElement("tr");
                    for(var i=0;i<objs.length;i++){
                        count++;
                        if(count<=objs.length){
                            tr=document.createElement("tr");
                            var tdid=document.createElement("td");
                            var tdname=document.createElement("td");
                            var tdpwd=document.createElement("td");
                            var tdacc=document.createElement("td");
                            var tddel=document.createElement("td");
                            tdid.innerText=objs[i].id;
                            tr.append(tdid);
                            tdname.innerText=objs[i].username;
                            tr.append(tdname);
                            tdpwd.innerText=objs[i].password;
                            tr.append(tdpwd);
                            tdacc.innerText=objs[i].access;
                            tr.append(tdacc);
                            var s="id="+objs[i].id+"&username="+objs[i].username+"&password="+objs[i].password;
                            tddel.innerHTML="<a href='update.html?"+s+"'>修改</a>" +
                                "<a href='javascript:void(0)' onclick='dels(this,"+objs[i].id+")'>删除</a>";
                            tr.append(tddel);
                            b.append(tr);
                        }else{
                            tr.remove();
                        }
                    }
                }
            }
        }
        xhr.open("get","/test/getAll");
        xhr.send();
    }
    /*function del(tr,id){//jQueryAjax方法
        var result=confirm("确定要删除吗？操作不可逆");
        $.post("/test/del","id="+id,function (data) {
            if(result==true){
                if(data=="1"){
                    alert("删除成功");
                    tr.parent().parent().remove();
                    location.href="getAll.html";
                }else alert("删除失败");
            }
        })

    }*/
    function dels(tr,id){
        var xhr=new XMLHttpRequest();
        var result=confirm("确定要删除吗？操作不可逆");
        xhr.onreadystatechange=function(data){
            if(xhr.readyState==4&&xhr.status==200){
                if(result==true){
                    if(xhr.responseText=="1"){
                        alert("删除成功");
                        var fa=tr.parentNode.parentNode;
                        fa.remove();
                    }else alert("删除失败");
                }
            }
        }
        xhr.open("post","/test/del");
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send("id="+id);
    }
</script>

查询所有的servlet

PrintWriter writer = response.getWriter();
UsersService us=new UsersServiceImpl();
List<Users> all = us.getAll();
Object o = JSON.toJSON(all);
if(o!=null) writer.print(o);
else writer.print("bad");

删除的servlet

String id = request.getParameter("id");
PrintWriter writer = response.getWriter();
UsersService us=new UsersServiceImpl();
int delete = us.delete(Integer.parseInt(id));
if(delete>0) writer.print("1");
else writer.print("0");

修改的html

<form method="post">
    id : <input type="text" readonly value="" name="id" id="id"><br>
    username : <input type="text" name="username" value="" id="username"><br>
    password : <input type="text" name="password" value="" id="password">
</form>
<button onclick="changes()">修改</button>

修改的script

<script>
    $(function () {
        var search = location.search.substring(1);
        var str=search.split("&");
        $.each(str,function(i){
            var v1=str[i].split("=");
            $("#"+v1[0]).val(v1[1]);
        })
    })
    function changes() {
        var id=$("#id").val();
        var username=$("#username").val();
        var password=$("#password").val();
        var userinfo={"id":id,"username":username,"password":password};
        var s=JSON.stringify(userinfo);
        $.post("/test/update","userinfo="+s,function (data) {
            if(data=="1"){
                alert("修改成功");
                location.href="getAll.html";
            }else alert("修改失败");
        })
    }
</script>
</body>

修改的servlet

String userinfo = request.getParameter("userinfo");
UsersService us=new UsersServiceImpl();
int update = us.update(userinfo);
PrintWriter writer = response.getWriter();
if(update>0) writer.print("1");
else writer.print("0");

添加数据

<body>
<%
    UsersService us=new UsersServiceImpl();
    int id = us.getAllID();
    request.setAttribute("id",id);
%>
<form method="post">
    id : <input type="text" readonly value="${id+1}" name="id" id="id"><br>
    username : <input type="text" name="username" id="username"><br>
    password : <input type="text" name="password" id="password">
</form>
<button onclick="adds()">添加用户</button>
<script>
    function adds() {
        var id=$("#id").val();
        var username=$("#username").val();
        var password=$("#password").val();
        var str={"id":id,"username":username,"password":password};
        var s=JSON.stringify(str);
        $.post("/test/add","userinfo="+s,function (data) {
            if(data=="1"){
                alert("添加成功");
                location.href="getAll.html";
            }else alert("添加失败");
        })
    }
</script>
</body>

添加的servlet

String userinfo = request.getParameter("userinfo");
UsersService us=new UsersServiceImpl();
int add = us.add(userinfo);
PrintWriter writer = response.getWriter();
if(add>0) writer.print("1");
else writer.print("0");