在 Jquery 中使用 Ajax 进行内联编辑

Question

有人可以建议我在以下代码中可能出错的地方吗？我正在尝试使用 Ajax 和 Jquery 使 html 表上的某些字段可编辑。编辑正在前端进行，但是当我刷新页面时，编辑消失了，因为它们没有被写入数据库。到目前为止我的代码是：

index.php -- 我正在尝试使名称字段可编辑

echo "<table cellpadding='0' cellspacing='0' border='0' class='table table-striped' id='datatable'>
        <thead>
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>City</th>
            <th>County</th>
            <th>Phone</th>
            <th>Mobile</th>
            <th>Admin</th>
        </tr>
        </thead><tbody>";
        while( $row = $sth->fetchObject() ){
            echo '<tr>
                <td class="edit name '.$row->customer_id.'">'.$row->name.'</td>
                <td>'.$row->address_line_1.',<br />'.$row->address_line_2.',<br />'.$row->address_line_3.'</td>
                <td>'.$row->city.'</td>
                <td>'.$row->county.'</td>
                <td>'.$row->phone.'</td>
                <td>'.$row->mobile.'</td>
                <td><div class="btn-group">
                <a class="btn btn-primary" href="#">Admin</a>
                <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span>
                </a><ul class="dropdown-menu">
                <li><a href="mailto:'.$row->email.'"><i class="icon-envelope"></i>Email</a></li><li><a href="#"><i class="icon-pencil"></i>Edit</a></li><li><a id="'.$row->customer_id.'" class="delete"/><i class="icon-trash"></i>Delete</a></li>
                </td></tr>';
                    }
            echo "</tbody></table>";

jQuery

<script>
            $(document).ready(function(){                           
                $('td.edit').click(function(){
                    $('.ajax').html($('.ajax input').val());
                    $('.ajax').removeClass('ajax');

                    $(this).addClass('ajax');
                    $(this).html('<input id="editbox" size="'+$(this).text().length+'" type="text" value="' + $(this).text() + '">');

                    $('#editbox').focus();

                }
            );
                $('td.edit').keydown(function(event){
                    arr = $(this).attr('class').split( " " );
                        if(event.which == 13)
                            { 
                            $.ajax({    type: "POST",
                                        url:"includes/edit-customer.php",
                                        data: "value="+$('.ajax input').val()+"&rownum="+arr[2]+"&field="+arr[1],
                                        success: function(data){
                                             $('.ajax').html($('.ajax input').val());
                                             $('.ajax').removeClass('ajax');
                                        }});
                        }

                    }
                );
                    $('#editbox').live('blur',function(){
                    $('.ajax').html($('.ajax input').val());
                    $('.ajax').removeClass('ajax');
                });
            });
    </script>

edit-customer.php

<?php

    //MySQL Database Connect
    require 'config.php';

    if(isset($_POST['rownum']))  
    {  
        update_data($_POST['field'],$_POST['value'],$_POST['rownum']);  
    }  

    print_r($_POST);

    function get_data()  
    {  
        $query = $dbh->prepare("SELECT * FROM customer");
        $query->execute();
        return $query;
    }  

    function update_data($field, $data, $rownum)  
    {  
        $query = $dbh->prepare("UPDATE customer SET ".$field." = '".$data."' WHERE customer_id = ".$rownum;);
        $query->execute();      
    }   
?>

我的数据库的customer表中的列是customer_id、name、address_line_1、address_line_2、address_line_3、city、county、phone、mobile、email

Answer 1

您的 UPDATE 语句中有一个分号：

$query = $dbh->prepare("UPDATE customer SET ".$field." = '".$data."' WHERE customer_id = ".$rownum;);

应该是

$query = $dbh->prepare("UPDATE customer SET ".$field." = '".$data."' WHERE customer_id = ".$rownum);

另一个问题是，arr[] 中的 rownumber 和 field 很容易混淆，因为您只是在拆分并假设先有一个。

Answer 2

我认为您需要简化问题。首先，似乎数据没有保存在服务器端。您不检查执行查询期间是否有错误。像这样修改它以找到错误/消除错误向量：

$result = $query->execute();     
// execute() can fail for various reasons.
if ( false===$result ) {
  die('execute() failed: ' . htmlspecialchars($query->error));
}'

并修改成功以查看返回的任何错误消息：

success: function(data){

alert(data);
}});

如果这是空的，那么我们可以排除您的查询中的错误。