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

Question

I have HTML like this:

<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>

I don't know why I can't get the the id '1' and post to index with a '?' in the URL for data {msg, id}.

Answer 1

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

Firstly what you're calling the id is just the innerText of the p element. To retrieve that you need to traverse the DOM from the provided a element using prev() and retrieve it.

Also note that my-data is not a valid attribute for an a element. To store custom data with an element you should use data-* attributes. You should also use unobtrusive Javascript to attach your events instead of clunky and outdated on* event attributes.

With that said, the following should work for you:

<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);      
        });
    });
}); 

Finally you state that you want the request data to be put in the URL, if that's the case you should use $.get instead of $.post .