js怎样将数组传到后台

才开始学前端基础,求解怎么将表格里的数组传入后台?


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格title>
    <style>
        table {
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td, th {
            text-align: center;
            border: 1px solid;
        }
        div {
            text-align: center;
            margin: 50px;
        }
    style>
head>
<body>
<div>
    <input type="text" id="name" placeholder="请输入姓名">
    <input type="text" id="id" placeholder="请输入身份证">
    <input type="text" id="work" placeholder="请输入工作单位">
    <input type="text" id="beiz" placeholder="请输入备注">
    <input type="button" value="添加" id="btn_add">
div>

<table>
    <caption>学生信息表caption>
    <tr>
        
        <th>姓名th>
        <th>身份证th>
        <th>工作单位th>
        <th>备注th>
        <th>操作th>
    tr>
    <tr>
        <td>张三td>
        <td>521311td>
        <td>腾讯td>
         <td>空td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除a>td>
    tr>
    <tr>
        <td>李四td>
        <td>521111td>
        <td>阿里td>
         <td>空td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除a>td>
    tr>
    <tr>
        <td>王五td>
        <td>51111td>
        <td>百度td>
         <td>无td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除a>td>
    tr>

table>
<script>
    document.getElementById("btn_add").onclick = function () {
        var name = document.getElementById("name").value;
        var id = document.getElementById("id").value;
        var work = document.getElementById("work").value;
         var beiz = document.getElementById("beiz").value;

        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);

        var td_id = document.createElement("td");
        var text_id = document.createTextNode(id);
        td_id.appendChild(text_id);

        var td_work = document.createElement("td");
        var text_work = document.createTextNode(work);
        td_work.appendChild(text_work);
        
        var td_beiz = document.createElement("td");
        var text_beiz = document.createTextNode(beiz);
        td_beiz.appendChild(text_beiz);

        var td_a = document.createElement("td");
        var a = document.createElement("a");
        a.setAttribute("href", "javascript:void(0);")
        a.setAttribute("onclick", "delTr(this);");
        var text_a = document.createTextNode("删除");
        a.appendChild(text_a);
        td_a.appendChild(a);

        var tr = document.createElement("tr");
        tr.appendChild(td_name);
        tr.appendChild(td_id);
        tr.appendChild(td_work);
         tr.appendChild(td_beiz);
        tr.appendChild(td_a);
        var tab = document.getElementsByTagName("table")[0];
        tab.appendChild(tr);
    }
    function delTr(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
script>
body>
html>

学过 ajax 嘛？用ajax 调后台接口，根据接口类型，传值就行

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        table {
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td, th {
            text-align: center;
            border: 1px solid;
        }
        div {
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>
<div>
    <input type="text" id="name" placeholder="请输入姓名">
    <input type="text" id="id" placeholder="请输入身份证">
    <input type="text" id="work" placeholder="请输入工作单位">
    <input type="text" id="beiz" placeholder="请输入备注">
    <input type="button" value="添加" id="btn_add">
</div>
 
<table id="table">
    <caption>学生信息表</caption>
    <tr>
        
        <th>姓名</th>
        <th>身份证</th>
        <th>工作单位</th>
        <th>备注</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>521311</td>
        <td>腾讯</td>
         <td>空</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td>李四</td>
        <td>521111</td>
        <td>阿里</td>
         <td>空</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
    <tr>
        <td>王五</td>
        <td>51111</td>
        <td>百度</td>
         <td>无</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
 
</table>
<script>
    document.getElementById("btn_add").onclick = function () {
        var name = document.getElementById("name").value;
        var id = document.getElementById("id").value;
        var work = document.getElementById("work").value;
         var beiz = document.getElementById("beiz").value;
 
        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);
 
        var td_id = document.createElement("td");
        var text_id = document.createTextNode(id);
        td_id.appendChild(text_id);
 
        var td_work = document.createElement("td");
        var text_work = document.createTextNode(work);
        td_work.appendChild(text_work);
        
        var td_beiz = document.createElement("td");
        var text_beiz = document.createTextNode(beiz);
        td_beiz.appendChild(text_beiz);
 
        var td_a = document.createElement("td");
        var a = document.createElement("a");
        a.setAttribute("href", "javascript:void(0);")
        a.setAttribute("onclick", "delTr(this);");
        var text_a = document.createTextNode("删除");
        a.appendChild(text_a);
        td_a.appendChild(a);
 
        var tr = document.createElement("tr");
        tr.appendChild(td_name);
        tr.appendChild(td_id);
        tr.appendChild(td_work);
         tr.appendChild(td_beiz);
        tr.appendChild(td_a);
        var tab = document.getElementsByTagName("table")[0];
        tab.appendChild(tr);
    }
    function delTr(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }


    function getvalue(){
        var gridArr=[];
        var dom=document.getElementById("table");
        var rows=dom.rows;
        for(var i=1;i<rows.length;i++){ //行
            var griditem={};
            for (let j = 0; j < rows[i].cells.length; j++) {
                griditem.name = rows[i].cells[0].innerText;
                griditem.code = rows[i].cells[1].innerText;
                griditem.unit = rows[i].cells[2].innerText;
                griditem.text = rows[i].cells[3].innerText;
            };
            gridArr.push(griditem)
        }
        console.log(gridArr)
        return gridArr
    }
    let myTableData = getvalue();
    //这是处理后的一个数组
    // myTableData = [
        // 0: {name: '张三', code: '521311', unit: '腾讯', text: '空'}
        // 1: {name: '李四', code: '521111', unit: '阿里', text: '空'}
        // 2: {name: '王五', code: '51111', unit: '百度', text: '无'}
    // ]

    function Ajax(){
        $.ajax({
            url: "http://***.***.***.***:port",
            type: "POST",
            data:{
                // 这边放的是你接口的对应字段
                aaaa: myTableData
            },
            cache:false,
            dataType: "json",//参数属性
            success: function(data){
                //成功的回调
                console.log(data)
            },
            error:function(err){
                //失败的回调
                console.log(err)
            }
        });
        }
</script>
</body>
</html>

用 ajax 方法，

function getFormInfo(){
  var name='chen';
  var user='wen';
  $.ajax({
    url: "接受地址",
    type: "POST",
    data:{name:name,user:user},
    cache:false,
    dataType: "json",
    success: function(data){
 
    },
    error:function(err){
    }
  });
}

使用http进行通信，原生的就是https://www.runoob.com/xml/xml-http.html，jq有自带的https://www.runoob.com/jquery/ajax-ajax.html，vue可以使用https://www.runoob.com/vue2/vuejs-ajax-axios.html

用fetch吧


fetch('/', {
  method: 'post',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    arr: [1, 2, 3]
  })
})

js原生的写法

var ajaxObj=new XMLHttpRequest();
ajaxObj.open("GET","../php/ajaxSubmitData.php?data=tody is wind");
ajaxObj.send()
ajaxObj.onreadystatechange= function () {
    if(ajaxObj.readyState===4&&ajaxObj.status){
        alert("发送成功");    
    }
}

要么就使用JQ的ajax：

$.ajax({
      type:"get",
      url:"",
      function(data){
            console.log(data)      
        }
  });

js用ajax传递，这是js交互基础啊