javascript - 如何使用 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 '1' 并使用 '?' 发布到索引在数据 {msg, id} 的 URL 中。

Answer 1

i want to get ID in <p> and my-data in <a> then sent to index.php?page=mypage

首先是你所说的id只是 p 的 innerText元素。要检索您需要从提供的 a 遍历 DOM元素使用 prev()并取回它。

另请注意 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 .