使用jQuery json ajax php删除整个行

Question

我要实现的是删除整个行。 首先，我显示表格，然后，如果您从每一行单击“删除”按钮，则会显示一个确认模式，询问您是否要删除该行。

我正在尝试使用jquery，ajax，json和PHP。 我当然还在学习。

到目前为止，我所拥有的是：

Javascript文件：

function callToModal(data){
 $('#myModal3 .modal-body p').html("Desea eliminar al usuario " + '<b>' + data + '</b>' + ' ?');
 $('#myModal3').modal('show');
 $('.confirm-delete').on('click', function(e) {
 e.preventDefault();
 var id = $(this).data('id');
 $('#myModal3').data('id', id).modal('show');
});


$('#btnYes').click(function() {
// handle deletion here
var id = $('#myModal3').data('id');
alert(id);
$.ajax({
    url: "deleteFrontUser",
    type: 'POST',
    data: {
      id:id
          },
      success: function(html){
        //alert(html);
        $('[data-id='+id+']').parents('tr').remove();
        $('#myModal3').modal('hide');
      }      
    });
   return false;
});
};

在我的admin.php文件中：

public function deleteFrontUser(){
    // var_dump($_POST['id']);die();
    $rowId = $_POST['rowId'];

    $result = array();

    $front = UserDs::getInstance()->getUserById($id);
    UserDs::getInstance()->deleteItem($front);

    $result["message"] = "Usuario eliminado";

    echo json_encode($result);
}

视图（请注意，我正在使用Smarty模板引擎）：

<div class="portlet-body">
        <table class="table table-striped table-hover table-users">
            <thead>
                <tr>
                    <th>Avatar</th>
                    <th class="hidden-phone">Usuario</th>
                    <th>Nombre</th>
                    <th>Apellido</th>
                    <th class="hidden-phone">Email</th>
                    <th class="hidden-phone">Provincia</th>
                    <th class="hidden-phone">Miembro desde</th>
                    <th>Estado</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>

            <tbody>
                {foreach $frontusers as $frontuser}
                <tr>
                    {if $frontuser->frontavatar_id eq null}
                    <td><img src="{site_url()}assets/img/avatar.png" alt="" /></td>
                    {else}
                    <td><img src="{site_url()}assets/img/avatar1.jpg" alt="" /></td>
                    {/if}
                    <td class="hidden-phone">{$frontuser->username}</td>
                    <td>{$frontuser->name}</td>
                    <td>{$frontuser->lastname}</td>
                    <td class="hidden-phone">{$frontuser->email}</td>
                    <td class="hidden-phone">{$frontuser->state}</td>
                    <td class="hidden-phone">{$frontuser->creation_date|date_format:"%Y/%m/%d"}</td>

                    {if $frontuser->status eq 2}
                    <td ><span class="label label-success">Activo</span></td>
                    {else}
                    <td ><span class="label label-warning">No Activo</span></td>
                    {/if}

                    <td><a class="btn mini blue-stripe" href="{site_url()}admin/editFront/{$frontuser->id}">Modificar</a></td>

                    <td><a href="#" class="btn mini red-stripe confirm-delete" role="button" onclick="callToModal('{$frontuser->username}');" data-id="{$frontuser->id}">Eliminar</a></td>
                </tr>



                <!-- modal -->
                <div id="myModal3" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                        <h3 id="myModalLabel3">Eliminar</h3>
                    </div>
                    <div class="modal-body">
                        <p></p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
                        <button data-dismiss="modal" class="btn red" id="btnYes">Confirmar</button>
                    </div>
                </div>
                <!-- end modal -->

                {foreachelse}
                    <tr>
                        <td colspan="2"><span class="text-error"><i class="icon-exclamation"></i> No hay Usuarios cargados.</span></td>
                    </tr>
                {/foreach}
            </tbody>
        </table>
    </div>

当您单击特定行的删除按钮时，将显示模式对话框，但这是有趣的事情：第一次按Delete键不会删除该行。 当您按该行或任何其他行（按一次删除后）时，该行将被删除。 所以这是一个问题，另一个问题是我无法将数据发送到我的php文件，因此可以从数据库中删除它。

我该如何解决？

如果您想查看以下代码 ，我可以提供一个定制的小提琴：

Answer 1

url必须是位于您网站内的有效站点，您不能在url包含函数名称，因为AJAX调用不会知道该函数位于哪个文件中。

因此，您的url必须是：

url: "admin.php"

但是，您可以在AJAX调用中添加另一个参数，以告诉admin.php它应该执行哪个功能，这将起作用：

$.ajax({
    url: "admin.php",
    type: 'POST',
    data: {
        id:id,
        func:"deleteFrontUser"
    },
    success: function(html)
    {
        //alert(html);
        $('[data-id='+id+']').parents('tr').remove();
        $('#myModal3').modal('hide');
    }      
});

因此，在admin.php您必须在输入函数之前接收发布的数据，并且可以解析f​​unc变量以告诉执行哪个函数：

$rowId = $_POST['id'];
$func = $_POST['func'];

switch ($func)
{
    case 'deleteFrontUser':
        deleteFrontUser($rowId);
    break;
    default:
        // function not found.
    break;
}

而deleteFrontUser看起来像这样：

public function deleteFrontUser($rowId)
{
    $result = array();
    // Rest of the code.
    echo json_encode($result);
}

也许您需要对此进行一些修改，但这应该可以给您带来启发。

有关更多信息，请参阅$ .ajax文档 。

注意：

出于最佳实践的原因，请使用php的isset函数来确定是否实际发布了数据。 三元运算符使此操作非常简单且简短：

$emptyString = "";
$rowId = isset($_POST['id']) ? $_POST['id'] : $emptyString;
$func = isset($_POST['func']) ? $_POST['func'] : $emptyString;

我还建议使用jQuery的.on函数，并使其带有参数“ click”，并且该函数将在click事件上触发。 .click通常是一种不好的做法，因为它无法检测到DOM树中的更改，因此当您使用新的HTML更新它时， .on允许您将新元素添加到dom树中，但仍然能够侦听事件与他们相对应。

Answer 2

解决方法是这样的：

请参阅我以前的文章以获取正确的js文件并查看： 文章

用于从数据库中删除整行的php代码为：

public function deleteFrontUser(){

    $rowId = $_POST['id'];

    $result = array();

    $front = UserDs::getInstance()->getUserById($rowId);
    UserDs::getInstance()->deleteItem($front);

    $result["message"] = "Usuario eliminado";

    echo json_encode($result);
}