javascript - 无法使用ajax发送元素ID数据

Question

我试图通过 ajax 发送 id 数据，但我总是收到 undefined variable 错误。 ajax 可以很好地处理表单数据，但是当我尝试获取 id 值时会出现此问题。

PHP/html代码

<ul class="sub-menu">
    <?php
        $get_cats = retrieve_cat();
        while($cat_rows = mysqli_fetch_array($get_cats)){

            $id   = $cat_rows['category_id'];
            $title = $cat_rows['category_name'];
            echo "<li><a herf='post_category.php' class='abc' data-id='$id' id='$id' data-target='post_category'> $title </a></li>";
        }
    ?>
</ul>

JQuery :

$(".abc").click(function () {
   var id = $(this).attr("id");        
   edit_data(id);

  function edit_data(id)
  {
    $.ajax({
        url:"post_category.php",
         method:"POST",
        data:{id:id},
        dataType:"text",
        success:function(data){
            alert(data);
        }
    });
  }
});

post_category.php 页面只是回显值来测试它:

echo $_POST['id'];     

如我所说，我收到此错误的问题:

Notice: Undefined index: id in C:\xampp\htdocs\unv\post_category.php on line 6

但是在成功函数中我得到了正确的值。不知道哪里出了问题!

这是一张图片，用于更多解释

http://store2.up-00.com/2016-05/1464026786681.png

Answer 1

有一个错字。我重写了部分代码。你可以试试这个:

<script>
    $(document).on('click', '.abc', function(){
        var id = $(this).data('id');
        edit_data(id);
        function edit_data(id) {
            $.ajax({
                url:"post_category.php",
                method:"POST",
                data:{id:id},
                dataType:"text",
                success:function(data){
                    alert(data);
                }
            });
        }
    });
</script>