为什么点修改，要点击2次才可以生效，点击第一次的时候还会把数据清空，还有添加功能的时候会一直报错误



```javascript
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- 连接数据库必须将“java.sql”导入 -->
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title> 查询所有的系统 </title>
</head>
<!-- json 字符串 -->
<script type="text/javascript">
    function getStudents(){  //身体的
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.open("GET","http://localhost:8080/src/all",true);  //拿到id的数据 数据对象
        console.log(xmlhttp.status)      //  0：请求未初始化(还没有调用 open())
        console.log(xmlhttp.readyState)  //　1：请求已经建立，但是还没有发送（还没有调用 send()）
        xmlhttp.send();

        xmlhttp.onreadystatechange = function() {  //这类似于回调函数的做法。
            if (xmlhttp.readyState === 4 && xmlhttp.status ===200){
                var obj = JSON.parse(xmlhttp.responseText); //[{id:1,password:root},]
                var tbody =document.getElementById('tbMain'); //放到主题里面去
                for(var i=0; i<obj.length; i++) {   //遍历数组长度  遍历一下json数据
                    var trow = getDataRow(obj[i]);  //定义一个方法,返回tr数据
                    tbody.appendChild(trow);
                }
            }
        }
    }


    function getDataRow(h){
        var row = document.createElement('tr');        //创建行
        var idCell = document.createElement('td');     //创建第一列id
        idCell.innerHTML = h.id; //填充数据
        row.appendChild(idCell); //加入行 ，下面类似
        var usernameCell = document.createElement('td');//创建第二列name
        usernameCell.innerHTML = h.username;
        row.appendChild(usernameCell);
        var passwordCell = document.createElement('td');//创建第三列pass
        passwordCell.innerHTML = h.password;
        row.appendChild(passwordCell);

        //删除的按钮
        //到这里，json中的数据已经添加到表格中，下面为每行末尾添加删除按钮
        var delCell = document.createElement('td');//创建第四列，操作列
        row.appendChild(delCell);
        var btnDel = document.createElement('input'); //创建一个input控件
        btnDel.setAttribute('type','button');  //type="button"
        btnDel.setAttribute('value','删除');

        //删除操作
        btnDel.onclick=function(){
            if(confirm("确定删除这一行嘛？")){

                var xmlhttp;
                if (window.XMLHttpRequest)
                {
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }

                xmlhttp.open("GET","http://localhost:8080/src/iddelete?id="+h.id,true);   //拿到id的数据  //数据对象
                console.log(xmlhttp.readyState)  //　0：请求未初始化(还没有调用 open())
                console.log(xmlhttp.status)      //  1：请求已经建立，但是还没有发送（还没有调用 send()）
                xmlhttp.send();
                var parentNode = this.parentNode.parentNode.parentNode;
                var childParentNode = this.parentNode.parentNode;
                <!--  把id传入数据库  -->
                xmlhttp.onreadystatechange = function(){  //这类似于回调函数的做法。
                    if (xmlhttp.readyState === 4 && xmlhttp.status ===200){
                        //找到按钮所在行的节点，然后删掉这一行
                        //btnDel - td - tr - tbody - 删除(tr)
                        //刷新网页还原。实际操作中，还要删除数据库中数据，实现真正删除
                        parentNode.removeChild(childParentNode);
                    }
                }
            }
        }

        delCell.appendChild(btnDel); //把删除按钮加入td，别忘了


        //到这里下面为每行末尾添加修改按钮
        var updateCell = document.createElement('td');   //创建第五列，操作列
        row.appendChild(updateCell);   //将 updateCell添加成当前节点的最后一个子节点
        var update = document.createElement('input'); //创建一个input控件
        update.setAttribute('type', 'button'); //type="button"
        update.setAttribute('value', '修改');


        //更改数据(先要查询到数据,点击保存，修改数据，把id把值传过去)

        update.onclick = function () {
           var xmlhttp;
             if(confirm("确定要修改吗")){
                if (window.XMLHttpRequest) {
                    xmlhttp = new XMLHttpRequest();
                } else {// code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }

                var user = document.getElementById("username").value;
                var pass = document.getElementById("password").value;
                xmlhttp.open("POST", "http://localhost:8080/src/Idupdate?id="+ h.id, true);   //拿到id的数据  //数据对象
                xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
                //xmlhttp.send("username=32232&password=123132161");
                xmlhttp.send("username="+user+"&password="+pass);
                <!--  把id传入数据库  -->
                xmlhttp.onreadystatechange = function () {  //这类似于回调函数的做法。
                    if (xmlhttp.readyState === 4 && xmlhttp.status === 200){
                        // 数据是保存在 异步对象的 属性中 //在控制打印 文本格式
                        console.log(xmlhttp.responseText);
                        //先要查询到数据,点击保存，修改数据，把id把值传过去
                        // 显示div
                        document.getElementById("form").style.display = "block";
                        //获取表单数据
                    }
                }

            }
        }
        updateCell.appendChild(update);   //把修改按钮加入td，别忘了
        return row; //返回tr数据
    }


    function save(){
       var a = document.getElementById("username").value;
       var b = document.getElementById("password").value;
        alert(a)
        alert(b)
    }

        //添加数据的按钮
        //添加的操作

</script>

<body onload="getStudents()">

<table id='myTable'  border="1" align="center" width="50%" cellspacing="0">
    <thead>
    <tr>

        <th>i d： </th>
        <th>账号：</th>
        <th>密码：</th>
        <th>功能1：</th>
        <th>功能2：</th>

    </tr>
    </thead>                      <!--thead用来放标题之类的东西-->
    <tbody id="tbMain"> </tbody>   <!--tbody放数据本体-->
</table>

     <div id ="form" style="display:none;" method="post">

        <div>  账号：<input name="username" id="username"/>  </div>
        <div>  密码：<input name="password" id="password"/>  </div>
        <input type="button" onclick="save()" value="保存" />

     </div>

<form  name="myForm" method="post" action="Addmember" onsubmit="return add()">
       i d :<input type="text" name="id" placeholder="请输入要添加id">
       账 号：<input type="text" name="username" placeholder="请输入要添加的账号">
       密 码:<input type="text" name="password" placeholder="请输入要添加的密码">
    <input type="submit"  onclick="add()" value="添加"/>
    <input type="reset" value="重置"/>

</form>
</body>

</html>