时间戳

首页 > 解决方案 > 如何在脚本计数后立即使用 AJAX 查看数据库中的数据？

javascript - 如何在脚本计数后立即使用 AJAX 查看数据库中的数据？

问题描述

我通过实现如下所示的可编辑 HTML 表来练习 AJAX： 带有可编辑单元格的表格

逻辑是这样的：

  1. 用户点击左列（包含整数）；

  2. JS 脚本捕获它的值并通过使用 AJAX 将它们添加到数据库中；

  3. PHP 脚本获取该值，进行一些计算，将它们添加到数据库中并在右列（日期<td>）中显示结果。

现在正如预期的那样，PHP 脚本需要刷新页面以显示计算结果（日期在 中<td>）。我正在尝试编写 JS 脚本，该脚本将从数据库中检索计算数据并立即显示在 HTML 表格的单元格中。有麻烦。就这个问题寻求帮助。

索引.php：

<form id="form-wrap" action="functions.php" method="POST"> 
<select name="select1" required>
  <?php 
  for ($i = 1; $i <= 20; $i++) {
  echo "<option>".$i."</option>"; 
  }
  ?>
</select>
 <br>
 <input type="text" id="name" name="name">
 <input type="date" id="day" name="day">
 <input type="submit" name="button_ok" id="button_ok" value="Write">
 <input type="submit" name="show" id="show" value="Show table">
</form>

函数.php：

<?php
require_once 'dbconnect.php';

$loged = $_POST["name"];
$day = $_POST["day"];

class Count_Add_Class { 

  public function CountDays() {

   global $day, $loged, $day_remind1, $days_before1;

   $currenttime = time();

   $days_before1 = $_POST["select1"];

   // ... make some calculations with user's input ...

   $this->AddDate();

   }

  public function AddDate() {

   global $pdo, $loged, $day, $day_remind1, $days_before1;

    if (isset($_POST['button_ok'])) {

     // ... insert in database user's inpt and calculation result ...
   }
 }

}

$obj = new Count_Add_Class();
$obj -> CountDays();


function Count_days_new_data() {

  global $pdo, $day, $loged, $day_remind1_updated, 

  $stmt = $pdo->prepare("SELECT select1 FROM tablex WHERE name=?");

  $stmt->execute([$loged]);

  $res = $stmt->fetchAll();

     foreach ($res as $row) { 
          $day_remind1_updated = $row['select1'];
     }

   $day_remind1_updated = $day - ($days_before1_updated * 86400); 

   $day_remind1_updated = date('Y-m-d', $day_remind1_updated);     

}

Count_days_new_data();


function Show() {

 global $pdo, $loged, $faq, $day_remind1_updated;

      $stmt = $pdo->prepare("SELECT * FROM tablex WHERE name=?");
      $stmt->execute([$loged]);
      $faq = $stmt->fetchAll();

      $s1 = $_POST['editval'];
      $id = $_POST['id'];

      $stmt2 = $pdo->prepare("UPDATE tablex SET select1=? WHERE 
      id=?");
      $stmt2->execute([$s1, $id]);

      $stmt3 = $pdo -> prepare("UPDATE tablex SET day_remind1=?,WHERE 
      id=?");
      $stmt3->execute([$day_remind1_updated, $id]);

      require_once 'table.php';   

} 

Show();

?>

表.php：

<div id="day-data">
<tbody>
<?php
    foreach($faq as $key=>$value) {
?>

    <tr class="table_row">
    <td><?php echo $value['name']; ?></td>
    <td aria-label="First" contenteditable="true" onBlur="saveToDatabase(this,'select1','<?php echo $faq[$key]["id"];
?>')" onClick="showEdit(this);"><?php echo $faq[$key]["select1"]; ?> 
    </td>
    <td><?php echo $value['day_remind1']; ?></td>
    </tr>

<?php
   }
?>

编辑.js：

function showEdit(editableObj) {
   $(editableObj).css("background","#FFF");
 } 

function saveToDatabase(editableObj,column,id) {
  $(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat 
  right");
  $.ajax({
    url: "functions.php",
    type: "POST",
    data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
    success: function(data){
      $(editableObj).css("background","#FDFDFD");
    }        
   });
}

show.js：（受此答案启发）

$(".tbl tbody").on("click", "tr", function() {
  var id = $(this).find("td")[0].text(); // gets the first td of the 
  clicked tr
  var value =  $(this).find("td")[1].text()
  $.ajax({
    url : "table.php",
    dataType: "text",
    success : function (data) {
        $(".day-data").html(data);
     },
     error: function (data) {
        (".tbl").html('No such file found on server');
     }
    });
  });

当用户点击 HTML 表格左栏时，它会很好地显示；当他更改它时，数据会很好地添加到数据库中。现在，当页面刷新时，计算新数据，添加到数据库并显示在 HTML 表的右列中。

我想问题出在show.js. 需要一些帮助来纠正这个脚本！

Update1 ： ​​添加了我的任务逻辑的说明： 在此处输入图像描述

标签： javascriptphpjqueryhtmlajax

解决方案

不幸的是，您拥有functions.php文件中的所有内容。它不仅计算值，还呈现表格。因此，当您调用该函数时saveToDatabase，您发出的请求functions.php（我完全理解它）已经返回带有更新数据的表（作为函数的参数success）。尝试删除 show.js 并从中更改成功函数内容edit.js：

$(editableObj).css("background","#FDFDFD");

对此

$(editableObj).css("background","#FDFDFD");
$(".day-data").replaceWith(data);

推荐阅读