Question

我正在尝试通过ajax删除数据库中的记录。同时我想从页面中删除记录。所以我在HTML中有这个

<ul id="comments-list record-'.$row['id'].'" class="comments-list record">
    <li>
        <div class="comment-main-level">
            <div class="comment-box">
                <div class="comment-head">
                    <h6 class="comment-name by-author">'.$row['author'].''</h6>

                    <a href="?delete='.$row['id'].'" class="del">
                        <i class="fa fa-trash "></i>
                    </a>

                </div>
            </div>
        </div>
    </li>
</ul>

这是在循环内部，显示页面上的所有记录。这是ajax函数

$(document).ready(function() {
    $('.del').click(function(e) {
        e.preventDefault();
        var parent = $(this).parent();
        $.ajax({
            type: 'get',
            url: 'delete.php',
            data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''),
            beforeSend: function() {
                parent.animate({'backgroundColor':'#fb6c6c'},300);
            },
            success: function() {
                parent.slideUp(300,function() {
                    parent.remove();
                });
            }
        });
    });
});

我的delete.php是简单的删除查询

$stmt = $pdo->prepare("DELETE FROM comment where id = :id"); 
$stmt->bindParam(':id', (int)$id, PDO::PARAM_INT);
$stmt->execute();

当我点击此行index.php:183 Uncaught TypeError: Cannot read property 'replace' of undefined

上的删除时，当前错误来自ajax

未捕获的TypeError：无法读取未定义
的属性'replace'

ajax部分来自教程，因为我对js / ajax非常不熟悉。

这里有什么问题？

Answer 1

在您的函数中$(this) = <a href="?delete='.$row['id'].'" class="del">。

var parent = $(this).parent(); = <div class="comment-head"> 没有身份证。因此attr('id')会返回undefined。

您可以通过以下方式选择ul元素：

var parent = $(this).closest('ul.comments-list.record');

Answer 2

这段代码怎么样:(充分利用jquery）

<ul id="comments-list record-'.$row['id'].'" class="comments-list record">
<li>
    <div class="comment-main-level">
        <div class="comment-box">
            <div class="comment-head">
                <h6 class="comment-name by-author">'.$row['author'].''</h6>
                <i onclick="del(<?=$row['id']?>)" class="fa fa-trash "></i>
            </div>
        </div>
    </div>
</li>

你的jquery成为：

function del(i)
  {
     $.ajax({
            type: 'get',
            url: 'delete.php',
            data: {'ajax':1,'delete':i},
            success: function() {
                get_list();
            }
        });
    }

function get_list()
{
 //make ajax call to get data from php
}

Answer 3

您正在获取未定义，因为您要获取的父项是这样的：

<div class="comment-head">

正如您所看到的那样，没有id。这就是你未定义的原因。

作为参考，我不相信jQuery中有一个replace（）方法。您可能正在寻找的是replaceWith（）方法。有关更多信息，请参阅文档。

我不相信你需要在任何地方进行更换。根据我的理解，您希望将行[id]作为参数传递给AJAX调用。而不是尝试替换，使用如下所示的数据：

<script
  src="https://code.jquery.com/jquery-2.2.4.js"
  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
  crossorigin="anonymous"></script>

<style>
        #comments-list {
                border: 1px solid black;
        }
</style>

<ul id="comments-list" data-id="1" class="comments-list record">
    <li>
        <div class="comment-main-level">
            <div class="comment-box">
                <div class="comment-head">
                    <h6 class="comment-name by-author">Me</h6>

                    <a href="?delete=1" class="del">
click here
                    </a>

                </div>
            </div>
        </div>
    </li>
</ul>

<script>
$(document).ready(function() {
    $('.del').click(function(e) {
        e.preventDefault();

        // Grab the id
        var commentsBlock = $('#comments-list');
        var id = commentsBlock.data('id');
        console.log(id);

        $.ajax({
            type: 'get',
            url: 'delete.php',
            data: 'ajax=1&delete=' + id,
            success: function() {
                commentsBlock.slideUp(300,function() {
                    commentsBlock.remove();
                });
            }
        });
    });
});
</script>

使用ajax删除行并删除页面上的记录

3 个答案: