下拉菜单Bootstrap PHP

Question

I am trying to send the data from a PHP page with AJAX , but I am not able to understand how this works, I will explain what I have done so far.

Bootstrap dropdown:

<div class="btn-group">
    <button class="btn btn-danger btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
        BOTÂO <span class="caret"></span>
    </button>                   
    <ul class="dropdown-menu" role="menu" id="status">
        <li data="1"><a href="#">valor 1</a></li>
        <li data="2"><a href="#">valor 2</a></li>
    </ul>
</div>

AJAX:

$(document).on('click','#status li',function(){
    $.ajax({
        url  : 'exemple.php',
        type : 'POST',
        data : {
               'valor' : $('#data').val()
        },
    });
}); 

I changed the AJAX to:

$(document).on('click','#status li',function(){
    $.ajax({
        url  : 'exemple.php',
        type : 'POST',
        data : {
            'valor': $(this).attr('data')
        },
    });
});

But does not work aswell. Any idea please?

Answer 1

data attribute is supposed to be in format like : data-something="foo".
It's then easy accessible using jQuery's .attr() (or .data()) method

HTML:

<div class="btn-group">
    <button class="btn btn-danger btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
    BOTÂO <span class="caret"></span>
    </button>                   
    <ul class="dropdown-menu" role="menu" id="status">
        <li data-something="1"><a href="#">valor 1</a></li>
        <li data-something="2"><a href="#">valor 2</a></li>
    </ul>
</div>

Script:

In order to get server response inside your Ajax call, you should add success (when things went ok) and error (when things went wrong) callbacks:

$(document).on('click','#status li',function(){
    var dd_val = $(this).attr('data-something');
    $.ajax({
        url     : 'exemple.php',
        type    : 'POST',
        data    : { valor : dd_val},
        success : function(data){
            // do anything with server response when success:
            console.log(data);
        },
        error   : function(jqXHR, textStatus, errorThrown ){
            // do anything when error
            console.log(textStatus + ' ' + errorThrown);
        }
    });
});

Demo