使用ajax和php从动态创建的表单中删除记录

时间:2016-07-01 14:51:34

标签: php jquery mysql json ajax

我想删除动态创建但代码无效的记录。请看看

的script.js

$(function() {

            $('#studentRecord').on('click', 'button.delete', function() {

            var $tr = $(this).closest('tr');

            var $id = parseInt( $(this).attr('id').split('-')[1] );


            if ( confirm("Are you sure you want to delete this record") ) {

                $.ajax({
                    url: '/ab_batch/practice/db/action.php',
                    type: 'POST',
                    data: {
                        action: 'ajaxDelRecord',
                        id: JSON.stringify(id)
                    },

                    success: function() {},


                    error: function() {}

                });

            }


        });


    });

action.php的

$action = ( isset($_REQUEST['action']) && !empty($_REQUEST['action']) ) ? $_REQUEST['action'] : null;
switch ($action) {
case 'ajaxDelRecord':

        if ( isset($_POST['id']) ) {
            $id = json_decode($_POST['id']);
        }

        $id = json_decode($_POST['id']);
        print ( $student->delRecord($id) ) ? 'true' : 'false' ;

        break;

}

还有另一个文件db.php,其中包含用于删除,添加和更新的所有API

1 个答案:

答案 0 :(得分:3)

JSON.stringify(id)应该是JSON.stringify($ id),因为你声明你的id是$ id,你真的不需要:JSON.stringify因为你只是向服务器发送一个整数

并且要删除刚刚从数据库中删除的行,您只需将以下代码替换为javascript代码:

$(function() {

            $('#studentRecord').on('click', 'button.delete', function() {

            var $tr = $(this).closest('tr');

            var $id = parseInt( $(this).attr('id').split('-')[1] );


            if ( confirm("Are you sure you want to delete this record") ) {

                $.ajax({
                    url: '/ab_batch/practice/db/action.php',
                    type: 'POST',
                    data: {
                        action: 'ajaxDelRecord',
                        id: JSON.stringify($id)
                    },

                    success: function() {},

                      $tr.remove(); // removing the current deleted record from html.
                    error: function() {}

                });

            }


        });


    });

我确实在成功回调中添加了$tr.remove();,因为您已经声明了已删除记录的父元素,因此您只需要使用:$tr.remove();来删除tr。