Как использовать Data атрибуты и надо ли это?

Question

[Евгений Иванов]

У меня есть ссылка, в которой надо передавать дополнительную информацию.
В мануале пишут - использовать data атрибуты.

Пример (упрощен дабы акцентировать внимание на проблеме)

<a class="my_button" data-action="create_user" data-number="1">Создать пользователя</a>

Но возникает проблема, неудобство. Всё дело в символе - , используемом в имени атрибута.

Например, чтобы принять данные в php надо написать что то вроде.
$data-action=$_GET['data-action'];
Но так нельзя. Т.к. имя переменной в php не может содержать -. Значит, как вариант пишем так.
$data_action=$_GET['data-action'];
Всё верно. Всё работает. Обработчик php принимает данные из формы.

А теперь, в этот php обработчик, нам нужно передать данные из js.

$.ajax({url: 'actions.php', method: 'POST', data: 
{
data-action: 'create_user',
});

Но так нельзя. И снова проблема в имени. Что очевидно, символ - в имени переменной/объекта обычно недопустим.

Значит, как вариант пишем так.

$.ajax({url: 'actions.php', method: 'POST', data: 
{
data_action: 'create_user',
});

Всё верно. Всё работает.

А что в обработчике? А там что было.
$data_action=$_GET['data-action'];
А у нас уже не data-action, а 'data_action.
Значит

$data_action=$_GET['data-action'];
$data_action=$_POST['data_action'];

Итого смысл атрибута data-action один, а имя изменяется, что плодит лишний код.
Не важно $_GET или $_POST - это упрощенный пример. А атрибутов много. Реальный код разбит на модули и т.д.

А ведь можно было
$data_action=$_REQUEST['data_action'];
Просто, логично и единообразно.

Но в мануале пишут - использовать data атрибуты. И их синтаксис data-атрибут.

Замечу, что свои атрибуты

<a class="my_button" data_action="create_user" data_number="1">Создать пользователя</a>

Будут работать и решат проблему. Но валидно/правильно ли это?
Как использовать Data атрибуты и надо ли это? Может лучше свои атрибуты?

Comments

[FeST1VaL]

Так когда принимают данные data упускают чаще всего... типо становится просто action тк ты же именно название передавал. Я не вижу большой проблемы в этом)

var action = $(this).attr('data-action');

[2cha.headz]

w3c валидатор ругается
валидатор
вставьте туда свой html

у вас ajax как отправляется?
вы же можете писать атрибут data-custom, а в ajax написать любое имя переменной

приложите функцию клика по ссылке

как пример можно делать так

$('.my_button').click(function(e){
    e.preventDefault();
    $.ajax({url: 'actions.php', method: 'POST', data: 
    {
        data_custom: $(this).data('custom')
    });
})

[Евгений Иванов]

2cha,Норм всё. Видимо, вы просмотрели что то.
Document checking completed. No errors or warnings to show.
Артем Будин, когда много кода, возникают вопросы.

Answer 1

[Егор Скороходов]

так нельзя

$.ajax({url: 'actions.php', method: 'POST', data: 
{
data-action: 'create_user',
});

а так можно
{ 'data-action': 'create_user'}

В мануале написано "использовать дата-атрибуты" совсем не с той целью, с которой вы их используете.
Задумка там явно такая

<button data-action="create-user">Create user</button>
<button data-action="delete-user">Delete user</button>

$('button').click(function() {
   var el = $(this);
   $.ajax({url: 'actions.php', method: 'POST', data: 
      {
            'action': el.data('action'),
      });
});

теперь, при клике на кнопку create user на сервер придёт экшн create-user, а при клике на кнопку delete user, придёт экшн delete-user

Comments

[Евгений Иванов]

{ 'data-action': 'create_user'}

Спасибо, помогло.

el.data('action'),

Интересно и полезно, но у меня всё сложнее. Может и не быть data.

Answer 2

[Alex]

Дата атрибуты, это вообще не в ту сторону.
Чтобы передать параметры на сервер применяют Query string

<a class="my_button" href="actions.php?action=create_user&number=1">Создать пользователя</a>

Или, если вы используете ajax

$.ajax({
  url: 'actions.php',
  method: 'POST',
  data: {
    'action': 'create_user'
  })

$_GET['action']
$_GET['number']

А data- атрибуты нужны на клиенте, чтобы удобно передавать какае-то данные внутри html элемента:

<a class="my_button" data-action="create_user" data-number="1">Создать пользователя</a>

console.log(
    document.querySelector('.my_button').dataset
)

{
    "action":"create_user",
    "number":"1"
}

Comments

[Евгений Иванов]

Я использую data-action информацию, которая должна быть передана в js.
И класс у ссылки/ссылок, как идентификатор объекта.
2 ссылки вызывают один и тот же js скрипт (по классу), который в зависимости от data-action загружает в div разный html код.
Что не так?

Прошу заметить, что почти все атрибуты у html объектов состоят из 1 слова, без символа - .
href, div, br, name, value, class...
И стандартный код обработчика формы принимает атрибут, прописанный в html коде формы, без изменений.

PS
Про id писать не буду.