使用用户界面更新 mySQL 表 - PHP答案

【问题标题】：Updating mySQL table with user interface - PHP使用用户界面更新 mySQL 表 - PHP
【发布时间】：2020-11-05 05:47:14
【问题描述】：

[Sample Look]

我正在尝试创建一个界面，您可以在其中编辑/添加/删除 mySQL 数据库的字段。这就是它的视觉外观，我在客户端的所有功能都在工作。

我的问题是：如何将任何编辑/添加/删除传递到服务器端？我将包含我的JSFiddle 的链接。下面的代码将显示我目前的桌子有多棒。

<?php
  $servername = "localhost";
  $username = "lalalal";
  $password = "lalalal";

  $link = mysqli_connect("localhost", "lalala", "lalala", "lalala");

  // Check connection
  if($link === false){
      die("ERROR: Could not connect. " . mysqli_connect_error());
  }

  $sqlStart = "SELECT `Name`, `EXT`, `Returning Time`, `Returning Date`, `Out`, `Reset`, `Booked` FROM `lalala`";
    if($result = mysqli_query($link, $sqlStart)){
        if(mysqli_num_rows($result) > 0){
            echo "<table id = contactTable>";
                echo "<tr id = row1>";
                    echo "<th id = sortTable onclick=sortTable(0)>Name &#8597;</th>";
                    echo "<th style = width:100px;>EXT</th>";
                    echo "<th style = width:300px;>Returning Time</th>";
                    echo "<th style = width:300px;>Returning Date</th>";
                    echo "<th style = width:70px;>Out</th>";
                    echo "<th style = width:100px;>Reset</th>";
                    echo "<th style = width:600px;>Booked</th>";
                echo "</tr>";
            while($row = mysqli_fetch_array($result)){
              $currentCheck = $row['Out'];
                  if ($currentCheck == 0) {
                    echo "<tr>";
                    echo "<td>" . $row['Name'] . "</td>";
                    echo "<td>" . $row['EXT'] . "</td>";

                    $currentTime = $row['Returning Time'];
                    if ($currentTime == 0) {
                      echo "<td> <form> <input type = 'time', id = 'timePickChange'> </form> </td>";
                    } else {
                      echo "<td> <form> <input type = 'time', id = 'timePickChange' value =" . $currentTime . "> </form> </td>";
                    }
                    
                    $currentDate = $row['Returning Date'];
                    echo "<td> <form> <input type = 'date', id = 'datePickChange' value =" . $currentDate . "> </form> </td>";
                    echo "<td> <form onclick = 'checkIfOutRow(this)'> <input type = 'checkbox', onclick = 'checkIfOutValue(this)'> </form> </td>";
                    echo "<td> <button onclick = 'clearForm(this)', id = buttonClear>Reset</button> </td>";
                    echo "<td> <textarea rows = '1', cols = '60'> </textarea> </td>";


                  } else if ($currentCheck == 1) {
                    echo "<tr style = 'background-color: #E2E9FD'>";
                    echo "<td>" . $row['Name'] . "</td>";
                    echo "<td>" . $row['EXT'] . "</td>";
                    $currentTime = $row['Returning Time'];
                    echo "<td> <form> <input type = 'time', id = timePickChange disabled> </form> </td>";
                    $currentDate = $row['Returning Date'];
                    echo "<td> <form> <input type = 'date', id = datePickChange disabled> </form> </td>";
                    echo "<td> <form onclick = 'checkIfOutRow(this)'> <input type = 'checkbox', onclick = 'checkIfOutValue(this)' checked> </form> </td>";
                    echo "<td> <button onclick = 'clearForm(this)', id = buttonClear>Reset</button> </td>";
                    echo "<td> <textarea rows = '1', cols = '60'> </textarea> </td>";
                  }
                echo "</tr>";
            }
            echo "</table>";
            // Free result set
            mysqli_free_result($result);
        } else{
            echo "No records matching your query were found.";
        }
    } else{
        echo "ERROR: Could not able to execute $sqlStart. " . mysqli_error($link);
    }
?>

【问题讨论】：

标签： javascript php html mysql

【解决方案1】：

根据您的数据验证模型，您可能希望在将输入值发布到后端之前控制客户端。

AFAIK，您已经在客户端添加/编辑/删除您的联系人，所以如果我理解正确，当您的用户应该点击 Edit/Remove & Confirm 时，这将确认用户所做的事情在浏览器中，除了您可能需要专用按钮/行（或任何其他可绑定事件）这一事实之外，这并没有真正改变。

对于这些操作，您可以做的是继续批量删除/编辑，这可以通过在您的 JS 中过滤掉所有修改/删除的数据并将其发送到您的后端 PHP 与 Ajax/jQuery 在字符串化数组的形式。至于插入操作，您可以在将它们添加到表的同时提交它们，方法是执行 POST 操作。

它可以通过这样的方式来完成：

$.ajax({
  method: "PUT",
  url: "some.php",
  data: JSON.stringify(myUpdatedDataInAnArray) 
// you might need to stringify your array to ensure format ? 
})
  .done(function( msg ) {
    alert( "Data Updated: " + msg );
  });

在你的后端 php 中，你会使用类似的东西来监听 POST/PUT/DELETE 方法：

if (isset($_POST['add'])){
   do your thing
}
if (isset($_PUT['updated'])){
   //Since you're sending a stringified array, you must parse it with 
   $myArray = json_decode($_PUT['updated']);
   do your thing
}
if (isset($_DELETE['deleted'])){
   do your thing
}

我说 Ajax 是因为使用传统的 POST/PUT/DELETE 表单会导致页面刷新。

这里有一些有用的参考：

【讨论】：