时间戳

首页 > 解决方案 > 如何将表 html 作为序列化数组发送到数据库？

javascript - 如何将表 html 作为序列化数组发送到数据库？

问题描述

我想将我的 javascript 和动态表作为文本变量发送到我的数据库。我解释了我所做的一切：

  1. 我使用 jquery 来获取值
  2. 然后我将 HTML 表值存储在 java 脚本数组中
  3. 我将 javascript 数组转换为 JSON 格式
  4. 我通过 JQuery AJAX 将 JSON 数组发送到 php 脚本

但是，我不知道如何将它发送到数据库？

这是我的代码：

function readTblValues() {
  var TableData = '';

  $('#tbTableValues').val(''); // clear textbox
  $('#tblDowntimes tr').each(function(row, tr) {
    TableData = TableData +
      $(tr).find('td:eq(1)').text() + ' ' // downtime
      +
      $(tr).find('td:eq(2)').text() + ' ' // equipment
      +
      $(tr).find('td:eq(3)').text() + ' ' // starttime
      +
      $(tr).find('td:eq(4)').text() + ' ' // finishtime
      +
      $(tr).find('td:eq(5)').text() + ' ' // descriptio
      +
      '\n';
  });
  $('#tbTableValues').html(TableData);
}

function storeAndShowTableValues() {
  var TableData;
  TableData = storeTblValues();
  $('#tbTableValuesArray').html('<br>JS Array: <br>' + print_r(TableData));
}

function storeTblValues() {
  var TableData = new Array();

  $('#tblDowntimes tr').each(function(row, tr) {
    TableData[row] = {
      "DOWNTIME": $(tr).find('td:eq(1)').text(),
      "equipment": $(tr).find('td:eq(2)').text(),
      "startdowntime": $(tr).find('td:eq(3)').text(),
      "finishdowntime": $(tr).find('td:eq(4)').text(),
      "description": $(tr).find('td:eq(5)').text()
    }
  });
  TableData.shift(); // first row will be empty - so remove
  return TableData;
}

function convertArrayToJSON() {
  var TableData;
  TableData = $.toJSON(storeTblValues());
  $('#tbConvertToJSON').html('<br>JSON array: <br>' + TableData.replace(/},/g, "},<br>"));


}

function sendTblDataToServer() {
  var TableData;
  TableData = $.toJSON(storeTblValues());
  $('#tbSendTblDataToServer').val('JSON array to send to server: <br<br>' + TableData.replace(/},/g, "},<br>"));

  $.ajax({
    type: "POST",
    url: "test.php",
    data: "pTableData=" + TableData, // post TableData to server script

    success: function(msg) {
      // return value stored in msg variable 
      $('#tbServerResponse').html('Server Response:<br><br><pre>' + msg + '</pre>');
    }
  });
}


function print_r(arr, level) {
  var dumped_text = "";
  if (!level)
    level = 0;

  //The padding given at the beginning of the line.
  var level_padding = "";
  for (var j = 0; j < level + 1; j++)
    level_padding += "    ";

  if (typeof(arr) === 'object') { //Array/Hashes/Objects 
    for (var item in arr) {
      var value = arr[item];

      if (typeof(value) === 'object') { //If it is an array,
        dumped_text += level_padding + "'" + item + "' \n";
        dumped_text += print_r(value, level + 1);
      } else {
        dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
      }
    }
  } else { //Stings/Chars/Numbers etc.
    dumped_text = "===>" + arr + "<===(" + typeof(arr) + ")";
  }
  return dumped_text;
}
<html>

<head>
</head>

<body>
  <form name="data-entry" method="post" action="data-entry.php">
    <input id="product-name" name="product-name" />
    <input id="product-quantity" name="product-quantity" />
    <input name="Downtime" id="Downtime" />
    <input name="equipment" id="equipment" />
    <input type='time' name='startdowntime' id='startdowntime' />
    <input type='time' name='finishdowntime' id='finishdowntime' />
    <input type='text' name='description' id='description' />
    <input type="button" value="add rows" id="btnAdd" onclick="addDowntime(this)" />
    <input type="button" value="remove rows" onclick="deleteSelected()" />
    <table id="tblDowntimes" class="downtime">
      <tr>
        <th><input type="checkbox" id="chkAll" onclick="chkAll_click(this)" /></th>
        <th>downtime</th>
        <th>equipment</th>
        <th>start-time</th>
        <th>finih-time</th>
        <th>description</th>

      </tr>
    </table>
    <input type="button" value="1. Read Table Values" name="read" onClick="readTblValues()" />
    <input type="button" value="2. Store values in JS Array" name="store" onClick="storeAndShowTableValues()" />
    <input type="button" value="3. Convert JS Array to json" name="convert" onClick="convertArrayToJSON()" />
    <input type="button" value="4. Send json array to Server" name="send" onClick="sendTblDataToServer()" />
    <div id="tbTableValues"></div>
    <div id="tbTableValuesArray"></div>
    <div id="tbConvertToJSON"></div>
    <div id="tbServerResponse"></div>
    <input type="submit" name="submit" value="submit" />

  </form>
</body>

</html>

这是我的php代码：

function processJSONArray() {
  $tableData = stripcslashes($_POST['pTableData']);
  $tableData = json_decode($tableData);
  var_dump($tableData);
}
echo  processJSONArray();

使用上述代码，我设法在客户端获取数组，但是当我使用此代码时出现错误（未定义变量：tableData）

if(isset($_POST[‘submit’])){
  echo $tableData;
}

标签： javascriptphpajax

解决方案

推荐阅读