Посещая наш сайт, вы соглашаетесь с нашей политикой конфиденциальности в отношении файлов cookie, статистики отслеживания и т. д.

Главная » Вопросы и ответы » Wordpress

WordPress + JavaScript + AJAX + MySQL: запрос вставки для формы

На чтение 10 мин Опубликовано
Содержание
  1. Вопрос или проблема
  2. Ответ или решение
  3. 1. Общая структура
  4. 2. JavaScript (ajax.js)
  5. 3. PHP (arcode-functions.php)
  6. 4. Проверка и отладка
  7. 5. Заключение

Вопрос или проблема

Я пытаюсь создать плагин для бронирования с формой на сайте WordPress-admin, где я могу добавить новое событие в календарь (созданное с помощью JavaScript).
Мне нужно отправить форму со всеми данными и вставить данные в базу данных MySQL.

Мой ajax.js файл:

function ajaxSubmit(e){
var nazwa_szkolenia = document.getElementById("nazwa_szkolenia").value;
var Data_szkolenia = document.getElementById("Data_szkolenia").value;
var Godzina = document.getElementById("Godzina").value;
var Max_pacjent = document.getElementById("Max_pacjent").value;

// Возвращает сообщение об успешной отправке данных, когда введенная информация хранится в базе данных.
var dataString = 'nazwa_szkolenia1=' + nazwa_szkolenia + '&Data_szkolenia1=' + Data_szkolenia + '&Godzina1=' + Godzina + '&Max_pacjent1=' + Max_pacjent;
if (nazwa_szkolenia == '' || Data_szkolenia == '' || Max_pacjent == '') {
    alert("Заполните все поля");
} else {
    // предотвратить действие по умолчанию.
    e.preventDefault();

    var myform= jQuery(this).serialize();

    jQuery.ajax({
        type:"POST",
        // Получить URL админского ajax, который мы передали через wp_localize_script().
        url: ajax_object.ajax_url,
        action: "submitAjaxForm",
        data: dataString,
        error: function(jqXHR, textStatus, errorThrown){                                        
        console.error("Произошла следующая ошибка: " + textStatus, errorThrown);                                                       
    },
        success:function(data){
            alert("процесс OK");
        }
    });
}
return false;
}

arcode-functions.php:

<?php
add_action('init', 'registerFormAction');

    function registerFormAction(){
        add_action('wp_ajax_nopriv_submitAjaxForm','submitAjaxForm_callback');
        add_action('wp_ajax_submitAjaxForm','submitAjaxForm_callback');

    }

    function submitAjaxForm_callback(){
        global $wpdb;

        $nazwa_szkolenia2 = $_POST['nazwa_szkolenia1'];
        $Data_szkolenia2 = $_POST['Data_szkolenia1'];
        $Godzina2 = $_POST['Godzina1'];
        $Max_pacjent2 = $_POST['Max_pacjent1'];

        $wpdb->insert( $wpdb->modul_terminarz, array( 'proba' => $nazwa_szkolenia2, 'id' => '10', 'data_szkolenia' => $Data_szkolenia2, 'typ_szkolenia' => '1', 'ile_miejsc' => $Max_pacjent2, 'pelne' => '1', 'Ile_miejsc_akt' => '4' ) );

        wp_die();
    }

?>

Я добавил admin-ajax.php с функцией wp_localize_script. Кнопка формы создана с помощью JavaScript:

var Input_Form_Send = document.createElement('input');
    Input_Form_Send.value="Создать";
    Input_Form_Send.type="submit";
    Input_Form_Send.className="input-form-send";  
    Input_Form_Send.onclick = ajaxSubmit;

Когда я заполняю все поля формы, нажимаю на кнопку, тогда появляется алерт “процесс ок”, но в базе данных ничего нового не появляется… nazwa_szkolenia, Data_szkolenia, Godzina, Max_pacjent – это названия полей формы.

Может быть, вы знаете, что я сделал не так?

Я немного все очистил. Теперь это выглядит так:

ajax.js

function ajaxSubmit(e){
var nazwa_szkolenia = document.getElementById("nazwa_szkolenia").value;
var Data_szkolenia = document.getElementById("Data_szkolenia").value;
var Godzina = document.getElementById("Godzina").value;
var Max_pacjent = document.getElementById("Max_pacjent").value;

var dataString = [];
dataString['nazwa_szkolenia1'] = nazwa_szkolenia;
dataString['Data_szkolenia1'] = Data_szkolenia;
dataString['Godzina1'] = Godzina;
dataString['Max_pacjent1'] = Max_pacjent;

if (nazwa_szkolenia == '' || Data_szkolenia == '' || Godzina == '' || Max_pacjent == '') {
alert("Заполните все поля");
} else {
    // предотвратить действие по умолчанию.
    e.preventDefault();

    //var myform= jQuery(this).serialize();

    jQuery.ajax({
        type:"GET",
        // Получить URL админского ajax, который мы передали через wp_localize_script().
        url: ajax_object.ajax_url,
        action: "submitAjaxForm",
        data: dataString,
        error: function(jqXHR, textStatus, errorThrown){                                        
        console.error("Произошла следующая ошибка: " + textStatus, errorThrown);                                                       
    },
        success:function(data){
console.log(dataString);
        }
    });
}
return false;
}

arcode-functions.php:

<?php

function registerFormAction(){
    add_action('wp_ajax_nopriv_submitAjaxForm','submitAjaxForm_callback');
    add_action('wp_ajax_submitAjaxForm','submitAjaxForm_callback');
}

function submitAjaxForm_callback(){
   global $wpdb;

    $nazwa_szkolenia2 = $_GET['nazwa_szkolenia1'];
    $Data_szkolenia2 = $_GET['Data_szkolenia1'];
    $Godzina_szkolenia2 = $_GET['Godzina1'];
    $Max_pacjent2 = $_GET['Max_pacjent1'];

        $result = $wpdb->insert( $wpdb->modul_terminarz, array( 
                                  'Nazwa_szkolenia' => $nazwa_szkolenia2, 
                                  'Data_szkolenia' => $Data_szkolenia2, 
                                  'Godzina_szkolenia' => $Godzina_szkolenia2,
                                  'Typ_szkolenia' => '1',
                                  'Ile_miejsc_max' => $Max_pacjent2,
                                  'Pelna_obsada' => '0',
                                  ) );

    wp_die();   
}

add_action('init', 'registerFormAction');

?>

Этот код остается в моем menu.php:

// Хук для добавления админских меню

 add_action('admin_menu', 'create_Terminarz_menu');

 // функция действия для вышеупомянутого хука

/**
 * Добавляет новую верхнюю страницу в меню администрирования.
 */
function create_Terminarz_menu() {

     add_menu_page(
        'ARCode Terminarz',
        'Terminarz',
        'manage_options',
        'zarzadzanie-terminami',
        'tm_zarzadzanie_terminami_odp',
        plugins_url('images/terminarz.png', __FILE__),'2.2.10'
    );

     add_submenu_page( 'zarzadzanie-terminami', 'ARCode Terminarz' . 'Расписание курсов', '<b style="color:#E46500;">Расписание курсов</b>', 'manage_options', 'zarzadzanie-terminami', 'tm_zarzadzanie_terminami_odp');
     add_submenu_page( 'zarzadzanie-terminami', 'ARCode Terminarz' . 'Пациенты', 'Пациенты', 'manage_options', 'pacjenci', 'tm_zarzadzanie_pacjentami_odp');
      add_action('admin_enqueue_scripts','load_custom_wp_admin_js');
}

/**
 * Обратный вызов отображения для страницы Unsub.
 */
 function tm_zarzadzanie_pacjentami_odp() {

 }

 function load_custom_wp_admin_js($hook){
    wp_register_script( 'jquery.min.js', plugin_dir_url( __FILE__ ) . 'js/jquery.min.js', array('jquery'));
    wp_enqueue_script( 'jquery.min.js' );
    wp_enqueue_style( 'kalendarz',plugin_dir_url( __FILE__ ) . 'kalendarz.css',false,'1.1','all' );
    wp_register_script( 'ajax-script', plugin_dir_url( __FILE__ ) . 'ajax_js.js');
    wp_localize_script('ajax-script', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));
    wp_enqueue_script( 'ajax-script', plugin_dir_url( __FILE__ ) . 'ajax_js.js');
}

 /**
 * Обратный вызов отображения для страницы Unsub.
 */
 function tm_zarzadzanie_terminami_odp() {
     include_once( 'arcode-functions.php');
     include_once( 'kalendarz.php');

     ?>
     <div class="wrap" style="position: fixed;
          width: 85%;
          top: 40px;
          bottom: 80px;">
     </div>
     <?php

 }

В kalendarz.php у меня есть все функции для календаря бронирования и форм, это форма, которую я должен отправить:

this.createFormular = function () {
             var ob = this.o;

             var Admin_Form = document.createElement('form')
             Admin_Form.name="Formularz_Admin";
             Admin_Form.method='GET';
             Admin_Form.action='';

             var tabela = document.createElement('table');
             tabela.className="formular-table";

             var tr = document.createElement('tr');
             tabela.appendChild(tr);
             var td = document.createElement('td');
             td.appendChild(document.createTextNode('Название обучения:   '));
             tr.appendChild(td);
             tr.appendChild(td);

             td.appendChild(Input_Name_Training);

             var tr = document.createElement('tr');
             tabela.appendChild(tr);
             var td = document.createElement('td');
             td.appendChild(document.createTextNode('Дата обучения:   '));
             tr.appendChild(td);
             tr.appendChild(td);

             td.appendChild(Input_Date_Training);

             var tr = document.createElement('tr');
             tabela.appendChild(tr);
             var td = document.createElement('td');
             td.appendChild(document.createTextNode('Время обучения:   '));
             tr.appendChild(td);
             tr.appendChild(td);

             td.appendChild(Input_Hour_Training);

             var tr = document.createElement('tr');
             tabela.appendChild(tr);
             var td = document.createElement('td');
             td.appendChild(document.createTextNode('Макс. количество человек:   '));
             tr.appendChild(td);
             tr.appendChild(td);

             td.appendChild(Input_How_Many_People);          

             var tr = document.createElement('tr');
             tabela.appendChild(tr);
             var td = document.createElement('td');
             td.appendChild(document.createTextNode('   '));
             tr.appendChild(td);
             tr.appendChild(td);

             td.appendChild(Input_Form_Send);       

             Admin_Form.appendChild(tabela);

             this.divForm.appendChild(Admin_Form);

         };

Я пытался проверить, работает ли submitAjaxForm, я проверял это с помощью echo, как сказал скотт, но ничего не выводит. DataString дает правильный массив, но данные дают 0…
Я не знаю, что я делаю не так ;/ Я не вижу, если хук для регистрации для submitAjaxForm неправильный, на мой взгляд, все хуки в порядке…?

Почему вы сериализуете данные с помощью jQuery, но не передаете эту переменную через AJAX? Мое предположение, что данные должны быть в массиве, а не в строке данных, как в URL.

Вы могли бы проверить, попадают ли данные в функцию обратного вызова AJAX, возвращая значение данных и отображая его в alert() в функции успеха.

Что работает для меня, так это помещать данные в реляционный массив и использовать GET вместо POST.

var dataString = [];
dataString['nazwa_szkolenia1'] = nazwa_szkolenia;  // и т.д.

Надеюсь, это поможет.

.

Ответ или решение

Для того чтобы успешно реализовать функциональность отправки данных формы через AJAX в WordPress и вставлять их в базу данных MySQL, необходимо следовать определенным шагам, гарантируя корректное получение и обработку данных. Ниже представлен исчерпывающий ответ на ваш запрос.

1. Общая структура

Вы используете JavaScript (с библиотекой jQuery), AJAX, и PHP для взаимодействия с WordPress и MySQL. Убедитесь, что ваш AJAX-запрос соответствует установленным стандартам WordPress, особенно в части настройки обработчиков и передачи данных.

2. JavaScript (ajax.js)

Ваш JavaScript-код выглядит хорошо, однако я рекомендую внести некоторые изменения для улучшения его работы.

Изменения в ajax.js:

function ajaxSubmit(e) {
    e.preventDefault(); // Предотвращение стандартного поведения формы

    var nazwa_szkolenia = document.getElementById("nazwa_szkolenia").value;
    var Data_szkolenia = document.getElementById("Data_szkolenia").value;
    var Godzina = document.getElementById("Godzina").value;
    var Max_pacjent = document.getElementById("Max_pacjent").value;

    // Проверка на пустые поля
    if (nazwa_szkolenia === '' || Data_szkolenia === '' || Godzina === '' || Max_pacjent === '') {
        alert("Пожалуйста, заполните все поля");
        return;
    }

    // Использование объекта для передачи данных
    var dataString = {
        'nazwa_szkolenia1': nazwa_szkolenia,
        'Data_szkolenia1': Data_szkolenia,
        'Godzina1': Godzina,
        'Max_pacjent1': Max_pacjent,
        'action': 'submitAjaxForm' // Указание действия AJAX
    };

    jQuery.ajax({
        type: "POST", // Лучше использовать POST
        url: ajax_object.ajax_url, // URL для ajax
        data: dataString,
        success: function (response) {
            alert(response); // Показ успешного сообщения
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.error("Ошибка: " + textStatus, errorThrown);
        }
    });

    return false; // Возвращение false для предотвращения дальнейших действий
}

3. PHP (arcode-functions.php)

Убедитесь, что функция обратного вызова submitAjaxForm_callback корректно обрабатывает данные.

Изменения в arcode-functions.php:

add_action('init', 'registerFormAction');

function registerFormAction() {
    add_action('wp_ajax_nopriv_submitAjaxForm', 'submitAjaxForm_callback');
    add_action('wp_ajax_submitAjaxForm', 'submitAjaxForm_callback');
}

function submitAjaxForm_callback() {
    global $wpdb;

    // Используем $_POST вместо $_GET для получения данных
    $nazwa_szkolenia2 = sanitize_text_field($_POST['nazwa_szkolenia1']);
    $Data_szkolenia2 = sanitize_text_field($_POST['Data_szkolenia1']);
    $Godzina2 = sanitize_text_field($_POST['Godzina1']);
    $Max_pacjent2 = intval($_POST['Max_pacjent1']); // Приведение к целочисленному типу

    // Вставка данных в базу данных
    $result = $wpdb->insert( 
        'modul_terminarz', // Замените на имя вашей таблицы
        array(
            'Nazwa_szkolenia' => $nazwa_szkolenia2,
            'Data_szkolenia' => $Data_szkolenia2,
            'Godzina_szkolenia' => $Godzina2,
            'Ile_miejsc_max' => $Max_pacjent2,
            'Pelna_obsada' => 0, // Пример значения по умолчанию
        )
    );

    if ($result) {
        echo "Данные успешно добавлены!";
    } else {
        echo "Ошибка добавления данных.";
    }

    wp_die(); // Завершение выполнения скрипта
}

4. Проверка и отладка

  1. Проверка AJAX-запроса: Убедитесь, что выполняется правильный AJAX-запрос. Используйте инструменты разработчика в вашем браузере для мониторинга сети и проверки заголовков запроса и ответа.

  2. Коды статуса ответа: Добавьте выводы отладочной информации на стороне сервера, чтобы увидеть, что происходит во время выполнения.

  3. Таблица базы данных: Убедитесь, что таблица modul_terminarz существует и соответствует структуре, которую вы ожидаете.

  4. Код ошибки: Если вставка не проходит, проверьте переменную $wpdb->last_error для получения информации о последних ошибках в запросах к базе данных.

5. Заключение

Следуя этим шагам, вы сможете успешно отправить данные формы и сохранить их в базе данных WordPress. Поддерживайте чистоту и безопасность вашего кода, используя функции для фильтрации данных, а также следя за корректным использованием AJAX в WordPress.

ajax javascript mysql plugins
Оцените материал
Добавить комментарий

Капча загружается...

© 2024 IZ6.RU
*В материалах сайта упоминаются социальные сети Фейсбук / Инстаграм, принадлежащие Meta Platforms Inc., деятельность которой запрещена на территории РФ в части реализации данных социальных сетей на основании осуществления ею экстремистской деятельности