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

Question

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

我的动态表如下：

<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"> 

这里的转折是，我用我的第三列单选按钮，因此需要通过所检查出的值提交

的JavaScript代码（参考：Stackoverflow Answer）我使用的是：

功能SAVEDATA（） { 变种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请求，并插入到数据库中一样。

问题：

1. 选中的单选按钮不获取存储在数组中

2. 我需要有创建一个二维数组和存储所有的数据，并文我创建其表示[对象，object]

3. 我需要将这个数组使用ajax请求传递到另一个页面并将其存储在数据库中。

请帮我该怎么做？

在此先感谢。 NC

Answer 1

这里是解决方案。我已经修改了你的代码来解决一些错误..

<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您可以编写代码来保存这些数据的数据库OT文本文件，无论你想用它做。如果您打印，您会得到以下输出。

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来做到这一点。它可以用少得多的行数和更有效地完成。我只是想告诉你如何用你提供的代码来完成。如果您有任何问题，请告诉我。

DINS

EDITED ...

更好的办法做到这

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' 
    }); 

} 

Answer 2

你并不需要解码的PHP文件的JSON只是用

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