Ajax执行成功但未更新数据库

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通常会导致问题。