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＆＃39; 1＆＃39;并使用＆＃39;？＆＃39;进行索引。在数据的网址{msg，id}。

Answer 1

我希望<p>中的ID和<a>中的my-data然后发送到index.php？page = mypage

首先，您调用id的内容只是p元素的innerText。要检索它，您需要使用a从提供的prev()元素遍历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);      
        });
    });
});

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

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

1 个答案: