努力的编程的小白1 2021-08-23 22:44 采纳率: 50%
浏览 36
已结题

为什么点修改,要点击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>



```

  • 写回答

2条回答 默认 最新

  • 努力的编程的小白1 2021-08-24 09:33
    关注

    他就是这样的,截图又太多了

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 12月9日
  • 已采纳回答 12月1日
  • 创建了问题 8月23日

悬赏问题

  • ¥15 请问不小心下载到了钓鱼软件怎么办?
  • ¥15 求国博抢票 求国博抢票 有的私
  • ¥50 swiftui @query 报错
  • ¥50 怎么解决刷卡或扫码后,点击软件输入框,win10屏幕键盘不会自动弹出的问题
  • ¥15 如何使用arcgispro的训练深度模型,发现water和nowater精度为0?(相关搜索:深度学习)
  • ¥20 matlab作业不太懂呀有问题能给个代码吗
  • ¥15 自制电路图为何无法驱动ESP01S?
  • ¥15 前端加access数据库
  • ¥15 ARCGIS 多值提取到点 ERROR 999999
  • ¥15 mysql异常断电, [MY-011971] [InnoDB]