Question

每行都有一个带编辑按钮的表格。然后我有一个ajax函数，按钮编辑/保存应该在数据库中保存新值但不更新它。

在控制台中我看到它正在返回Success并且参数正确传递。

这是我拥有的按钮

foreach ($row as $r){
    echo '<tr id="row-'.$r['rate_id'].'">
             <td id="people-'.$r['number_of_people'].'">'.$r['number_of_people'].'</td>                        
             <td id="price_val-'.$r['rate_id'].'">$ '.$r['price_per_people'].'</td>
             <td>
                  <button id="edit_button'.$r['rate_id'].'" onclick="edit_row('.$r['rate_id'].')" class="btn btn-primary edit_button">Edit</button>
                  <input type="button" class="save_button" id="save_button'.$r['rate_id'].'" value="save" onclick="save_row('.$r['rate_id'].')">
             </td>
          </tr>';       
}

ajax功能

function edit_row(id)
{
 var price=document.getElementById("price_val-"+id).innerHTML;
 document.getElementById("price_val-"+id).innerHTML="<input type='text' id='price-"+id+"' value='"+price+"'>";

 document.getElementById("edit_button"+id).style.display="none";
 document.getElementById("save_button"+id).style.display="block";
}

function save_row(id)
{
 var price=document.getElementById("price-"+id).value;

 $.ajax
 ({
  type:'post',
  url:'includes/update.php',
  data:{
   edit_row:'edit_row',
   row_id:id,
   price_val:price,
  },
  success:function(response) {
   if(response=="success")
   {
    document.getElementById("price_val-"+id).innerHTML=price;
    document.getElementById("edit_button"+id).style.display="block";
    document.getElementById("save_button"+id).style.display="none";
   }
  }
 });
}

这是update.php

require 'connection.php';

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


    $sql = "UPDATE new_rates SET price_per_people = :price_for_people WHERE rate_id = :rate_id";
    $stmt = $db_con->prepare($sql);                                  
    $stmt->bindParam(':price_for_people', $_POST['price_val']);       
    $stmt->bindParam(':rate_id', $_POST['row_id']);      
    $stmt->execute(); 

    echo "success";
    exit(); 
}

在控制台中我看到了

edit_row:edit_row
row_id:1
price_val:$ 12

这似乎是正确的，除非我不确定美元符号$，因为我没有将其保存在数据库中。必须只保存价格12。

有人可以帮我清理一下并使其正常工作吗？由于success即将出现在控制台上，我有点迷失了可能是什么问题。

Answer 1

我只是隐藏它并切换其可见性，而不是创建和删除<input>字段。例如

foreach ($row as $r) : ?>
<tr id="row-<?= $r['rate_id'] ?>">
  <td id="people-<?= $r['number_of_people']?>"><?= $r['number_of_people'] ?></td>                        
  <td>
    $ <span id="price_val-<?= $r['rate_id'] ?>"><?= $r['price_per_people']?></span>
    <input style="display:none" type="number" min="0.00" step="0.01" value="<?= $r['price_per_people'] ?>" id="price-<?= $r['rate_id'] ?>">
  </td>
  <!-- and so on -->
</tr>
<?php endforeach ?>

并在您的JS中切换元素的可见性。其余的JS代码应该是正确的。

例如

function edit_row(id) {
  var showThese = ['price-', 'save_button'].map(prefix => '#' + prefix + id).join(',')
  var hideThese = ['price_val', 'edit_button'].map(prefix => '#' + prefix + id).join(',')
  $(showThese).show()
  $(hideThese).hide()
}

以及成功回调

$('#price_val-' + id).text(price)
var hideThese = ['price-', 'save_button'].map(prefix => '#' + prefix + id).join(',')
var showThese = ['price_val', 'edit_button'].map(prefix => '#' + prefix + id).join(',')
$(showThese).show()
$(hideThese).hide()

注意我已经使用了PHP的替代语法。使用echo创建大量静态HTML通常会导致问题。

Ajax执行成功但没有更新数据库

1 个答案: