PHP和jQuery之间的通讯问题

Question

I have a page generated from PHP like this:

<?php
    //In my original code, this is retrieved from databas..
    $users = array(
        array('id'=>1, 'login'=>'login1', 'email'=>'email1')
    );  
    foreach($users as $user){
        echo '<tr><td>'.$user['login'].'</td><td>'.$user['email'].'</td><td><button class="button-delete">Delete</button></td></tr>';
    }
?>

Then, in front side I have this script:

$('.button-delete').click(function(){
    var id=0;
    alert(id);
});

My aim is to make Delete button perform an ajax call to delete the user. Till now I didn't got there yet, my problem is how to get the user ID?

Answer 1

You can send the id within the button data and easily get it after.

<?php
    //In my original code, this is retrieved from databas..
    $users = array(
        array('id'=>1, 'login'=>'login1', 'email'=>'email1')
    );  
    foreach($users as $user){
        echo '<tr><td>'.$user['login'].'</td><td>'.$user['email'].'</td><td><button class="button-delete" data-id="'.$user['id'].'">Delete</button></td></tr>';
    }
?>

$('.button-delete').click(function(){
    var id=$(this).data('id');
    alert(id);
});

Answer 2

I usually do something like this:

<?php
    //note the change from button tag to anchor tag
    $users = array(
        array('id'=>1, 'login'=>'login1', 'email'=>'email1')
    );  
    foreach($users as $user){
        echo '<tr><td>'.$user['login'].'</td><td>'.$user['email'].'</td><td><a href="/link/to/delete/id/'.$user['id'].'/" class="button-delete">Delete</a></td></tr>';
    }
?>

And then in jQuery

$(document).ready(function(){
    $('.button-delete').click(function(){
        var $this = $(this);
        //Make an AJAX request to the delete script using the href attribute as url
        $.get($this.attr('href'), function(response) {
            //Inside your php script echo out 1 if the delete was successful.
            if(response) {
                //remove the parent row
                $this.parents('tr').fadeOut(1000, function(){
                    $(this).remove();
                });
            }
        });
        return false;
    });
});

I haven't tested the code but it should work. Have in mind that there are loads of ways to do this and this is my preferred way. My point is that you don't necessarily need the id as an individual variable.