Javascript 使用jquery json ajax php删除整行_Javascript_Php_Jquery_Ajax_Json

Javascript 使用jquery json ajax php删除整行

javascript php jquery ajax json

Javascript 使用jquery json ajax php删除整行,javascript,php,jquery,ajax,json,Javascript,Php,Jquery,Ajax,Json,我想要实现的是删除整行。首先我显示表格，然后如果您在每一行中单击“删除”按钮，则会出现一个确认模式，询问您是否要删除该行我正在尝试使用jquery、ajax、json和PHP。当然，我还在学习到目前为止，我得到的是： Javascript文件： function callToModal(data){ $('#myModal3 .modal-body p').html("Desea eliminar al usuario " + '<b>' + data + '</b>

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

我正在尝试使用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;
});
};

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模板引擎）：


阿凡达
乌萨里奥
名义
阿佩利多
电子邮件
省
米姆布罗德斯德
埃斯塔多
{foreach$frontusers作为$frontuser}
{if$frontuser->frontavatar_id eq null}
{else}
{/if}
{$frontuser->username}
{$frontuser->name}
{$frontuser->lastname}
{$frontuser->email}
{$frontuser->state}
{$frontuser->创建日期|日期|格式：“%Y/%m/%d”}
{if$frontuser->status eq 2}
活跃的
{else}
无活动
{/if}
Eliminar

塞拉
确认人
{foreachelse}
没有hay Usuarios cargados。
{/foreach}

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

我怎样才能解决这个问题

我有一个定制的小提琴，如果你想签出：

解决方案是：

请参阅我上一篇文章，以获得正确的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);
}

解决办法是：

请参阅我上一篇文章，以获得正确的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);
}

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

上，您必须在输入函数之前接收已发布的数据，并且您可以解析func变量来告诉要执行的函数：

$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);
}

也许你需要修改一下，但这会给你一个想法

有关更多信息，请参阅

注意：

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;
});
};

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);
}

出于最佳实践的原因，请使用函数确定数据是否已实际发布。操作员使此操作变得非常简单和简短：

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

我还建议使用jQuery的函数，让它接受参数“click”，其函数将在click事件中触发

.click

通常是不好的做法，因为它无法检测DOM树中的更改，所以当您使用新的HTML更新它时，您就完蛋了，

.on

允许您向dom树添加新元素，但仍然能够侦听与之对应的事件。

url

必须是位于网站内的有效站点，在

url

内不能有函数名，因为AJAX调用不知道函数位于哪个文件中