如何使用AJAX和jQuery发布数据？

Question

我有这样的HTML：

<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<p>1</p> <!-- this is loaded with <?php echo $item->id; ?> -->
<a id='delBtn1' my-data='tnt' onlick='del(this)' href='index.php?page=mypage'>
    <img src='del.ico'/>
</a>
<script>
    $(document).ready(function(){
        function del(e) {
            var p = $('a< p' ).html();
            $.post('index.php?page=mypage', {
                msg: e.getAttribute('my-data'), 
                id: p
            }, function(data, status) {
                alert("Sent " + data.msg + ' : '+ status);      
            });
        }
    }); 
</script>

我不知道为什么我不能获得id '并用'？ 在数据{msg，id}的URL中。

Answer 1

我想在<p>获取ID，在<a>获取my-data，然后发送至index.php？page = mypage

首先，您所谓的id只是p元素的innerText。 要检索您需要使用prev()从提供a元素中遍历DOM并进行检索。

另外请注意， my-data是不是一个有效的属性a元素。 要使用元素存储自定义数据，应使用data-*属性。 您还应该使用简洁的Javascript附加事件，而不是笨拙且过时的on*事件属性。

话虽如此，以下应该为您工作：

<p>1</p>
<a id="delBtn1" class="delBtn" data-my-data="tnt" href="index.php?page=mypage">
    <img src="del.ico" />
</a>

$(document).ready(function(){
    $('.delBtn').click(function(e) {
        e.preventDefault(); // stop the normal link behaviour 
        var $el = $(this);

        $.post($el.attr('href'), {
            msg: $el.data('my-data'),
            id: $el.prev('p').text(),
        }, function(data, status) {
            alert("Sent " + data.msg + ' : '+ status);      
        });
    });
}); 

最后，您声明您希望将请求数据放入URL中，如果是这种情况，则应使用$.get而不是$.post 。