下拉菜单Bootstrap PHP

Question

我正在尝试使用AJAX从PHP页面发送数据，但是我无法理解它是如何工作的，我将解释到目前为止的操作。

引导程序下拉列表 ：

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

我将AJAX更改为：

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

但效果不佳。 有什么想法吗？

Answer 1

data属性应采用以下格式： data-something="foo" 。
然后可以使用jQuery的.attr() （或.data() ）方法轻松访问

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>

剧本 ：

为了在Ajax调用中获得服务器响应，您应该添加success （一切正常）和error （事物出错）回调：

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

演示