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

У меня есть ссылка, в которой надо передавать дополнительную информацию.
В мануале пишут - использовать 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 атрибуты и надо ли это? Может лучше свои атрибуты?
  • Вопрос задан
  • 1153 просмотра
Решения вопроса 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
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
Дата атрибуты, это вообще не в ту сторону.
Чтобы передать параметры на сервер применяют 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"
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы