通过客户端处理将HTML数据保存到数据库中

Save HTML data into database by client side processing

本文关键字：保存数据库数据 HTML 过客客户端处理更新时间：2023-09-26

我需要将在客户端生成的动态表数据保存到数据库中。

我的动态表如下:

<table class="table" id = "myTable">
      <thead>
          <tr>
            <th>Roll No</th>
            <th>Student Name</th>
            <th>Attendance</th>
          </tr>
      </thead>
      <tbody>
          <?php foreach($results as $students) {?>
          <tr id="<?= $students->roll_no;?>" align ="center">
            <td><?= $students->roll_no;?></td>
            <td><?= $students->full_name;?></td>
            <td><input type="radio" id="att" name="attendance" value="present">Present
<input type="radio" id="att" name="attendance" value="absent">Absent</td>
          </tr>
          <?php } ?>                                                        
      </tbody>
    </table>
    <input type="submit" onClick="savedata()" name="submit" value="SAVE">

这里的变化是，我在第三列中使用了一个单选按钮，因此需要在SUBMIT 上传递选中的值。

javascript代码(参考:Stackoverflow答案)我正在使用的是:

savedata()函数{var oTable = document.getElementById('myTable');//获取表

      var rowLength = oTable.rows.length;
      //gets rows of table
      for (i = 1; i < rowLength; i++){
      //loops through rows
         var oCells = oTable.rows.item(i).cells;
         //gets cells of current row
         var cellLength = oCells.length;
             for(var j = 0; j < cellLength; j++){
             //loops through each cell in current row
                <!--get your cell info here-->
                if(j == cellLength-1)
                {
                      var cellVal = $('input[name="attendance"]:radio:checked');
                      alert(cellVal);
                                        // store it in array here
                                       radioarr = [oTable.rows.item(i).cells,oCells.item(j).innerHTML]; 
                }
                else
                {
                      var cellVal = oCells.item(j).innerHTML;
                      alert(cellVal);
                                        // store it in array here 
                                       fieldarr = [oTable.rows.item(i).cells,oCells.item(j).innerHTML];
                }
             }
      }
  }
  $.ajax{
      // Pass the data to another page insert.php and store it in the database
  }
</script>

所以我需要做的是…创建一个键值对并将其存储在数组中，并将其作为ajax请求传递，并将其插入到数据库中。

问题:

选中的单选按钮没有被存储在数组中
我需要创建一个2D数组并将所有数据存储在那里当我创建它时显示[object,object]
我需要通过这个数组使用ajax请求到另一个页面，并将其存储在数据库中。

请告诉我该怎么做?

提前感谢。数控

解决方案如下:我已经修改了你的代码来修复一些错误。

<table class="table" id = "myTable">
  <thead>
      <tr>
        <th>Roll No</th>
        <th>Student Name</th>
        <th>Attendance</th>
      </tr>
  </thead>
  <tbody>
      <?php foreach($results as $students) {?>
      <tr id="<?= $students["roll_no"];?>" align ="center">
        <td id="roll_no"><?= $students["roll_no"];?></td>
        <td id="full_name"><?= $students["full_name"];?></td>
         <!-- Attendance has to be unique for each row -->
        <td id="attendance"><input type="radio" id="att" name="attendance_<?= $students["roll_no"] ?>" value="present">Present
            <input type="radio" id="att" name="attendance_<?= $students["roll_no"]?>" value="absent">Absent</td>
      </tr>
      <?php } ?>                                                        
  </tbody>
</table>

  <script>
    function savedata() { 
        var roll_no = "";
        var jsonObject = '[';
        var oTable = document.getElementById('myTable');
    //gets table
    var rowLength = oTable.rows.length;
    //gets rows of table
    for (i = 1; i < rowLength; i++){
    //loops through rows
        jsonObject += "{";
       var oCells = oTable.rows.item(i).cells;
       //gets cells of current row
       var cellLength = oCells.length;
           for(var j = 0; j < cellLength; j++){
           //loops through each cell in current row
              <!--get your cell info here-->
              //added cell name so that I can create json id
              var cellName = oCells.item(j).id;
              var cellVal = oCells.item(j).innerHTML;
              if(j==0)
                  roll_no = cellVal;
              if(cellVal.search('radio')>0){
                  var cellVal = $('input[name="attendance_'+roll_no+'"]:radio:checked').val();
              }
              // A dirty way to creat json
              jsonObject += '"' +cellName + '":"' + cellVal + '",';
           }
           jsonObject = jsonObject.slice(0,jsonObject.length-1);
           jsonObject += '},';
        }
        jsonObject = jsonObject.slice(0,jsonObject.length-1);
        jsonObject += ']';
       // the json looks like this for 3 rows depending on what radio button u select
       // [{"roll_no":"10","full_name":"Name 1","attendance":"present"},{"roll_no":"14","full_name":"Name 2","attendance":"absent"},{"roll_no":"18","full_name":"Name 3","attendance":"present"}]
        //send this data to a php page
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data:"json=" + jsonObject,
            processData: false, 
            dataType: 'json'
        });
      }
</script>

ajax.php是用来发布json数据的文件。

<?php
    $value = json_decode(stripslashes($_POST["json"])); 
    print_r($value);
?>

在您的ajax.php中，您可以编写代码将此数据保存到数据库或文本文件，无论您想对它做什么。如果打印，将得到以下输出:

Array
(
[0] => stdClass Object
    (
        [roll_no] => 10
        [full_name] => Name 1
        [attendance] => present
    )
[1] => stdClass Object
    (
        [roll_no] => 14
        [full_name] => Name 2
        [attendance] => absent
    )
[2] => stdClass Object
    (
        [roll_no] => 18
        [full_name] => Name 3
        [attendance] => present
    )
)

这是最丑陋的方式…它可以用更少的行数和更有效地通过使用JQuery来完成。我只是想向您展示如何使用您提供的代码来完成它。如果你有任何问题，请告诉我。

喧嚣

编辑……

更好的方法

function savedata1() { 
var obj = $('#myTable tbody tr').map(function() {
    var $row = $(this);
    var roll = $row.find(':nth-child(1)').text();
    var atd = $row.find('td input[name="attendance_'+roll+'"]:radio:checked').val()
    return {
        roll_no: $row.find(':nth-child(1)').text(),
        full_name: $row.find(':nth-child(2)').text(),
        attendance: atd
    };
}).get();
 $.ajax({
        type: "POST",
        url: "ajax.php",
        data:"json=" + JSON.stringify(obj),
        processData: false, 
        dataType: 'json'
    });
}

不需要在PHP文件中解码json，只需使用

 $value = stripslashes($_POST["json"]);