下拉菜单引导 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 attribute 应该采用如下格式：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);
        }
    });
});

Demo