Метод jQuery ajax не возвращает данные

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

Я отправляю электронное письмо с помощью phpmailer, я получаю электронные письма, когда нажимаю кнопку “отправить”, но я хотел остаться на той же HTML-странице, поэтому использовал AJAX-скрипт с HTML и PHP. Проблема в том, что я не получаю данные JSON обратно, которые мне нужны, чтобы обновить свою HTML-страницу статусом электронной почты и ответом PHP, так что:

  • response_array статус
  • response_array сообщение
  • response_array успех

Спасибо за вашу помощь

AJAX В HTML

<script>
        $("#form").submit(function(e) {
        e.preventDefault(); // предотвратить фактическую отправку формы
        var from_name_temp = $('#from_name').val();
        var from_email_temp = $('#from_email').val();
        var choix_gout_temp = $(".choix_gout:checked").val();
        $.ajax({
            type: "POST",
            url: "/mailer.php",
            data: "from_name="+from_name_temp+"&from_email="+from_email_temp+"&choix_gout="+choix_gout_temp,
            dataType: "json",
            complete: function(data) {
                    console.log("Спасибо за подписку!");
                    console.log(data);
                    console.log(data.status);
                    console.log(data.message);
                    console.log(data.success);
                }
        })
    });
</script>

PHP

<?php

$error="";
$name="";
$email="";
$subject="";
$message="";

$from_email="";
$from_name="";
$choix_gout="";
$response_array = array();

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

function clean_text($string)
{
    $string = trim($string);
    $string = stripslashes($string);
    $string = htmlspecialchars($string);
    return $string;
}

 send($from_name, $from_email, $choix_gout); 

function  send($from_name, $from_email, $choix_gout){

    $error="";

    $ot1 = $_POST['choix_gout'];
    $ot2 = $_POST['from_name'];
    $ot3 = $_POST['from_email'];

    echo($ot1);
    echo($ot2);
    echo($ot3);

    if(empty($ot2))
    {
        $error .= '<p><label class="text-danger">Пожалуйста, введите ваше имя</label></p>';
        $name="";
    }
    else
    {
        $name = clean_text($ot2);
        if(!preg_match("/^[a-zA-Z ]*$/",$name))
        {
            $error .= '<p><label class="text-danger">Разрешены только буквы и пробелы</label></p>';
        }
    }
    if(empty($ot3))
    {
        $error .= '<p><label class="text-danger">Пожалуйста, введите ваш email</label></p>';
        $email="";
    }
    else
    {
        //$email = clean_text($_POST["from_email"]);
        $email = clean_text($ot3);
        if(!filter_var($email, FILTER_VALIDATE_EMAIL))
        {
            $error .= '<p><label class="text-danger">Недопустимый формат email</label></p>';
        }
    }

    if($error == '')
    {

        require 'PHPMailer/src/Exception.php';          /* Класс Exception. */
        require 'PHPMailer/src/PHPMailer.php';          /* Основной класс PHPMailer. */
        require 'PHPMailer/src/SMTP.php';               /* Класс SMTP, необходимый, если вы хотите использовать SMTP. */
        require 'PHPMailer/src/class.html2text.php';

        $mail = new PHPMailer();
        $mail->IsSMTP();
        $mail->SMTPDebug  = "1";
        $mail->Host       = "*****";
        $mail->Port       = "587";
        $mail->SMTPSecure = "tls";
        $mail->SMTPAuth   = "true";
        $mail->Username   = "*****";
        $mail->Password   = "*****";
        $mail->AddReplyTo("*****","****");
        $mail->From       = ("****");
        $mail->FromName   = ("***");
        $mail->AddAddress("*****,******");
        $mail->Subject  = "[GOUT] : " . $ot1 . ';' . $name . ';' . $email;
        $mail->IsHTML(true);
        $mail->Body = "
            <div style="width: 640px; font-family: Arial, Helvetica, sans-serif; font-size: 11px;">
            </div>
        ";
        if(!$mail->Send()) {
            $message="Ошибка почты: ".$mail->ErrorInfo;
            $response_array = array("success"=> false,
                                    "status" => false,
                                    "message" => $message);
            header('Content-Type: application/json');
            echo json_encode($response_array);die();
        } else {
            $message = "письмо отправлено";
            $response_array = array("success"=> true,
                                    "status" => true,
                                    "message" => $message);
            header('Content-Type: application/json');
            echo json_encode($response_array);die();
        }
    }
    else{
        $response_array = array("success"=> false,
                                "status" => false,
                                "message" => $error);
        header('Content-Type: application/json');
        echo json_encode($response_array);die();
    }?>

Судя по документации jQuery по вызываемому вами вызову, похоже, что вы, возможно, хотите использовать обратный вызов success вместо complete. success получает данные JSON напрямую, как вы ожидаете, но complete получает разные данные, которые вам нужно будет просмотреть. Обратитесь к документации для получения дополнительной информации, если вы уверены, что хотите использовать complete

Попробуйте success вот так:

$.ajax({
        type: "POST",
        url: "/mailer.php",
        data: "from_name="+from_name_temp+"&from_email="+from_email_temp+"&choix_gout="+choix_gout_temp,
        dataType: "json",
        success: function(data) {
                console.log("Спасибо за подписку!");
                console.log(data);
                console.log(data.status);
                console.log(data.message);
                console.log(data.success);
            }
    });

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

Проблема, с которой вы столкнулись, заключается в том, что метод AJAX jQuery не возвращает нужные данные, поскольку вы используете колбек complete, который не предоставляет прямого доступа к возвращаемым JSON-данным. Вместо этого рекомендуется использовать колбек success, который специально предназначен для обработки успешных ответов от сервера и получает данные прямо в виде объекта.

Вот как можно исправить ваш код AJAX в HTML:

<script>
    $("#form").submit(function(e) {
        e.preventDefault(); // предотвращаем фактическую отправку формы
        var from_name_temp = $('#from_name').val();
        var from_email_temp = $('#from_email').val();
        var choix_gout_temp = $(".choix_gout:checked").val();

        $.ajax({
            type: "POST",
            url: "/mailer.php",
            data: {
                from_name: from_name_temp,
                from_email: from_email_temp,
                choix_gout: choix_gout_temp
            },
            dataType: "json",
            success: function(data) {
                console.log("Спасибо за подписку!");
                console.log(data);
                console.log(data.status);
                console.log(data.message);
                console.log(data.success);

                // Здесь можно обновить вашу HTML-страницу в зависимости от ответа
                if(data.success) {
                    // Обновите HTML на странице для успешного отправления письма
                } else {
                    // Обработайте ошибку (например, покажите сообщение об ошибке)
                }
            },
            error: function(xhr, status, error) {
                console.error("Произошла ошибка: ", error);
                console.log("Статус: ", status);
                console.log("Ответ сервера: ", xhr.responseText);
            }
        });
    });
</script>

Основные изменения и рекомендации:

  1. Использование success вместо complete: Теперь, когда вы используете success, добавленный вами код будет получать фактические данные, возвращаемые PHP. Это позволит вам без проблем получить доступ к data.status, data.message и data.success.

  2. Корректная отправка данных: Вместо конкатенации строк для передачи данных, используйте объект, что сделает ваш код более чистым и предотвращает потенциальные ошибки.

  3. Обработка ошибок: Рекомендуется также добавить обработчик ошибок error, чтобы иметь возможность отследить проблемы соединения или ошибки на сервере, которые могут возникнуть при выполнении AJAX-запроса.

На стороне PHP:

Убедитесь, что вы правильно возвращаете JSON-ответ с заголовками. Пример:

header('Content-Type: application/json');
echo json_encode($response_array);
exit();

Заключение:

Проверив и исправив указанные проблемы, вы сможете должным образом получать и обрабатывать ответ сервера, улучшая взаимодействие вашего веб-приложения с пользователем. Если после исправлений проблема не исчезнет, убедитесь, что вы проверяете ошибки как в JavaScript, так и в PHP для более детальной отладки.

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

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