努力的编程的小白1 2021-08-17 13:16 采纳率: 50%
浏览 35
已结题

怎么通过json把表当的数据发送到后端


<%@ 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.readyState)  //　0：请求未初始化(还没有调用 open())
        console.log(xmlhttp.status)      //  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);


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

        //更改数据(先要查询到数据,点击保存，修改数据，把id把值传过去)
        show.onclick = function () {
            if (confirm("确定修改这一行嘛？")) {
                var xmlhttp;
                if (window.XMLHttpRequest) {
                    xmlhttp = new XMLHttpRequest();
                } else {// code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }

                xmlhttp.open("POST", "http://localhost:8080/src/Idupdate?id="+h.id, true);   //拿到id的数据  //数据对象
                //xmlhttp.open("POST","http://localhost:8080/src/Idupdate",true)
                var data_str = "username="+username+"&password="+password;
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                console.log(xmlhttp.readyState)  //　0：请求未初始化(还没有调用 open())
                console.log(xmlhttp.status)      //  1：请求已经建立，但是还没有发送（还没有调用 send()）
                //正式发送
                // xmlhttp.send();

                xmlhttp.send(data_str);
                var parentNode = this.parentNode.parentNode.parentNode;
                var childParentNode = this.parentNode.parentNode;
                <!--  把id传入数据库  -->
                xmlhttp.onreadystatechange = function () {  //这类似于回调函数的做法。
                    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {

                        //先要查询到数据,点击保存，修改数据，把id把值传过去
                        // 显示div
                        document.getElementById("form").style.display = "block";
                        //获取表单数据
                        var username = document.getElementById('username').value;
                        var password = document.getElementById('username').value;


                    }
                }

            }


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


    function save() {

        alert(document.getElementById("username").value)
        alert(document.getElementById("password").value)

    }

</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>功能：</th>
    </tr>
    </thead>                      <!--thead用来放标题之类的东西-->
    <tbody id="tbMain"> </tbody>   <!--tbody放数据本体-->
</table>


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

    <div>
        id：<input name="id" id="id"/>
    </div>

    <div>
        账号：<input name="username" id="username"/>
    </div>

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

</form>

</body>
</html>
  • 写回答

1条回答 默认 最新

  • 忍气吞声埋头苦干 2021-08-17 13:37
    关注
    
function update() {

 
        var formData = {};
        items = document.getElementsByClassName('form-control')#获取表单数据

        for (var x = 0; x < items.length; x++) {
            
                formData[String(items[x].name)] = items[x].value #组织Json格式数据
            
        }

#ajax提交
        $.ajax({
                url: "路径",
                type: "POST",
                data: formData,
                
                success: function (event) {

                    if (event == 'success') {
                        alert('成功！')
                    } else {
                        alert('请检查数据格式！')
                    }

                    window.location.reload()
                }


  

            }
        )
    }

    如果有帮助，请点个采纳哦~

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 10月20日
  • 已采纳回答 10月12日
  • 创建了问题 8月17日

悬赏问题

  • ¥15 对于相关问题的求解与代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料
  • ¥15 使用R语言marginaleffects包进行边际效应图绘制
  • ¥20 usb设备兼容性问题
  • ¥15 错误(10048): “调用exui内部功能”库命令的参数“参数4”不能接受空数据。怎么解决啊
  • ¥15 安装svn网络有问题怎么办