Как передать data-id в переменную php скрипта?

Question

Необходимо передать ID секции data-elementor-id в переменную php скрипта, который по этому ID получает данные из базы.

Вот пример кода:

<div data-elementor-type="section" data-elementor-id="1012">
<section class="container page-intro">
    <div class="header-text__links"><?php  the_breadcrumb() ?></div>
    <div class="row">
      <div class="col-sm-6">
        <h1><?php echo get_post_meta(1012,'title', true );?></h1>
      </div>
      <div class="col-sm-6">
        <p><?php echo get_post_meta(1012,'text', true );?></p>
      </div>
    </div>
  </section>      
</div>

Answer 1

Пример с передачей в input. (Дальше получаем файл в нужном скрипте как через обычную форму.

window.onload = function () { //Выполнить при загрузке
    var elems = document.querySelectorAll('[data-elementor-id]'); // Находим элементы с нужным атрибутом.
    var newArr = [];
    for (let i = 0; i < elems.length; i++) {
        newArr.push(elems[i].dataset.elementorId); // Записываем в массив полученные id из атрибутов.
    }
    document.getElementById('dataset').value = newArr; // Вариант первый - записываем в скрытое поле input или можно его создать через js сразу при действии
}

<div data-elementor-type="section" class="data" data-elementor-id="1012">
    <section class="container page-intro">
        <div class="header-text__links"></div>
        <div class="row">
            <div class="col-sm-6">
                <h1>Пурум Пум Пум</h1>
            </div>
            <div class="col-sm-6">
                <p>Парам Пам Пам</p>
            </div>
        </div>
    </section>
</div>
<div data-elementor-type="section" class="data" data-elementor-id="1013">
    <section class="container page-intro">
        <div class="header-text__links"></div>
        <div class="row">
            <div class="col-sm-6">
                <h1>Пурум Пум Пум</h1>
            </div>
            <div class="col-sm-6">
                <p>Парам Пам Пам</p>
            </div>
        </div>
    </section>
</div>
<div data-elementor-type="section" class="data" data-elementor-id="1014">
    <section class="container page-intro">
        <div class="header-text__links"></div>
        <div class="row">
            <div class="col-sm-6">
                <h1>Пурум Пум Пум</h1>
            </div>
            <div class="col-sm-6">
                <p>Парам Пам Пам</p>
            </div>
        </div>
    </section>
</div>
<form method="post">
    <input type="hidden" id="dataset">
    <button formmethod="post">Отправить данные дата</button>
</form>

Второй вариант через ajax

    var elems = document.querySelectorAll('[data-elementor-id]'); // Находим элементы с нужным атрибутом.
    var newArr = [];
    for (let i=0;i<elems.length;i++){
        newArr.push(elems[i].dataset.elementorId); // Записываем в массив полученные id из атрибутов.
    }

    var string = JSON.stringify(newArr);
    
    const request = new XMLHttpRequest();

    /*  Составляем строку запроса и кладем данные, строка состоит из:
    пути до файла обработчика ? имя в GET запросе где будет лежать значение запроса data */
    const url = "ajax_quest.php?data=" + string + ";

    /* Здесь мы указываем параметры соединения с сервером, т.е. мы указываем метод соединения GET,
    а после запятой мы указываем путь к файлу на сервере который будет обрабатывать наш запрос. */
    request.open('GET', url);

    // Указываем заголовки для сервера, говорим что тип данных, - контент который мы хотим получить должен быть не закодирован.
    request.setRequestHeader('Content-Type', 'application/x-www-form-url');

    // Здесь мы получаем ответ от сервера на запрос, лучше сказать ждем ответ от сервера
    request.addEventListener("readystatechange", () => {

        /*   request.readyState - возвращает текущее состояние объекта XHR(XMLHttpRequest) объекта,
        бывает 4 состояния 4-е состояние запроса - операция полностью завершена, пришел ответ от сервера,
        вот то что нам нужно request.status это статус ответа,
        нам нужен код 200 это нормальный ответ сервера, 401 файл не найден, 500 сервер дал ошибку и прочее...   */
        if (request.readyState === 4 && request.status === 200) {

            // выводим в консоль то что ответил сервер
            console.log( request.responseText );
        }
    });

<div data-elementor-type="section" class="data" data-elementor-id="1012">
    <section class="container page-intro">
        <div class="header-text__links"></div>
        <div class="row">
            <div class="col-sm-6">
                <h1>Пурум Пум Пум</h1>
            </div>
            <div class="col-sm-6">
                <p>Парам Пам Пам</p>
            </div>
        </div>
    </section>
</div>
<div data-elementor-type="section" class="data" data-elementor-id="1013">
    <section class="container page-intro">
        <div class="header-text__links"></div>
        <div class="row">
            <div class="col-sm-6">
                <h1>Пурум Пум Пум</h1>
            </div>
            <div class="col-sm-6">
                <p>Парам Пам Пам</p>
            </div>
        </div>
    </section>
</div>
<div data-elementor-type="section" class="data" data-elementor-id="1014">
    <section class="container page-intro">
        <div class="header-text__links"></div>
        <div class="row">
            <div class="col-sm-6">
                <h1>Пурум Пум Пум</h1>
            </div>
            <div class="col-sm-6">
                <p>Парам Пам Пам</p>
            </div>
        </div>
    </section>
</div>

<input type="hidden" id="dataset">

БЛОГ НА HUSL

Как передать data-id в переменную php скрипта?

Ответы (1 шт):