jQuery form.serialize() неправильно работает с ajax

ProgramBox

jQuery form.serialize() неправильно работает с ajax

Post author:admin
Запись опубликована:14 января, 2022
Post category:Вопросы по программированию

#jquery #ajax

Вопрос:

Когда я пытаюсь POST сформировать данные, полученные с form.serialize() помощью jQuery Ajax, данные неправильно отправляются на страницу действий.

Я даже попытался alert(data); проверить, хранятся ли данные в переменной. И он хранится, но contact.php каким-то образом неправильно отправляется. Страница действий реагирует так, как будто на нее не отправляются никакие данные.

Кроме того, в нем нет ошибок contact.php . Он полностью функционален. На самом деле я переношу страницу на стороне клиента на загрузочную версию 5. Он правильно работает на старой странице начальной загрузки 4.

Вот мой код :

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" integrity="sha512-usVBAd66/NpVNfBge19gws2j6JZinnca12rAe2l d QkLU9fiG02O1X8Q6hepIpr/EYKZvKx/I9WsnujJuOmBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        <style>
            .grecaptcha-badge {
                visibility: hidden;
            }
        </style>
    </head>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.bundle.min.js" integrity="sha512-72WD92hLs7T5FAXn3vkNZflWG6pglUDDpm87TeQmfSg8KnrymL2G30R7as4FmTwhgu9H7eSzDCX3mjitSecKnw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://www.google.com/recaptcha/api.js?render=6LcCwcIbAAAAAMTsXtGwnfHIPWOMc5aLQZ4RME0a"></script>
        <script>
            $(document).ready(function(){
                $("#contactForm").submit(function(event){
                    event.preventDefault();
                    var form = $(this);
                    var url = form.attr("action");
                    grecaptcha.ready(function() {
                        grecaptcha.execute('6LcCwcIbAAAAAMTsXtGwnfHIPWOMc5aLQZ4RME0a', {action: 'submit'}).then(function(token) {
                            $("#recaptchaResponse").val(token);
                            var data = form.serialize();
                            alert(data); // Just to check if data is stored to variable...
                            $.ajax({
                                type : "POST",
                                url : url,
                                data : data,
                                success : function(response) {
                                    $("#formResponse").html(response);
                                }
                            })
                        });
                    });
                });
            });
        </script>
        <div class="row">
        <div class="col"></div>
            <div class="container col border bg-light">
                <form id="contactForm" class="p-3" action="contact.php">
                    <div class="mb-3">
                        <label for="name">Name :</label>
                        <input class="form-control" name="name" placeholder="Your name...">
                    </div>
                    <div class="mb-3">
                        <label for="email">Email :</label>
                        <input class="form-control" name="email" placeholder="Your email...">
                    </div>
                    <div class="mb-3">
                        <label for="message">Message :</label>
                        <input class="form-control" name="message" placeholder="Write something...">
                    </div>
                    <input type="hidden" name="recaptchaResponse" id="recaptchaResponse">
                    <button type="submit" id="submitButton" class="btn btn-primary">Send</button>
                    <div id="formResponse" class="pt-3"></div>
                </form>
            </div>
            <div class="col"></div>
        </div>
    </body>
</html>

contact.php :

 <?php
use PHPMailerPHPMailerPHPMailer;
use PHPMailerPHPMailerException;
require 'mailer/Exception.php';
require 'mailer/PHPMailer.php';
require 'mailer/SMTP.php';
$mail = new PHPMailer();
$mail->IsSMTP();
$mail->Mailer = 'smtp';
$mail->SMTPDebug  = 0;  
$mail->SMTPAuth   = TRUE;
$mail->SMTPSecure = 'tls';
$mail->Port       = 587;
$mail->Host       = 'smtp.gmail.com';
$mail->Username   = 'user1@gmail.com';
$mail->Password   = 'app_password';
if (isset($_POST['name']) amp;amp; isset($_POST['email']) amp;amp; isset($_POST['text']) amp;amp; !empty($_POST['name']) amp;amp; !empty($_POST['email'])) {
    if (isset($_POST['recaptchaResponse']) amp;amp; !empty($_POST['recaptchaResponse'])) {
        $name = $_POST['name'];
        $email = $_POST['email'];
        $message = $_POST['message'];
        $ip = $_SERVER['REMOTE_ADDR'];
        $captcha = $_POST['recaptchaResponse'];
        $verifyCaptcha = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=secret_keyamp;response='.$captcha.'amp;remoteip='.$ip);
        $captchaData = json_decode($verifyCaptcha);
        $score = $captchaData -> score;
        if ($captchaData -> success = true amp;amp; $captchaData -> score > 0.5) {
            $mail->IsHTML(true);
            $mail->AddAddress($email, $name);
            $mail->SetFrom('user1@gmail.com', 'User 1');
            $mail->AddReplyTo('user1@gmail.com', 'User 1');
            $mail->AddBCC('user2@gmail.com', 'User 2');
            $mail->Subject = 'Contact Form';
            $content = 'Your query has been sent successfully. Please wait 48 working hours for response. (Message : '.$message.')';
            $mail->MsgHTML($content); 
            if(!$mail->Send()) {
              echo '<p class="alert alert-danger">Error while sending query.</p>';
              var_dump($mail);
            } else {
              echo('<p class="alert alert-success">Form submitted successfully.<br>(Captcha Score : '.$score.')</p>');
            }
        } else {
            echo('<p class="alert alert-danger">Unable to verify captcha.</p>');
        }
    } else {
        echo('<p class="alert alert-warning">reCAPTCHA data not received.</p>');
    }
} else {
    echo('<p class="alert alert-warning">Please fill all the required fields.</p>');
}
?>

Должен ли я конвертировать данные перед публикацией с помощью ajax? Любая помощь будет очень признательна.

Правка : Также добавлен код на стороне сервера..

1. Вы нам этого не показали contact.php . Отредактируйте свой вопрос, добавьте минимальные части этого файла, которые демонстрируют проблему. Вы проверили средства разработки вашего браузера и проверили сетевой запрос? Какие-нибудь ошибки на консоли?

2. Никаких ошибок в консоли. Я не могу включить все целиком contact.php из-за некоторых ограничений. Что он делает, так это гарантирует, что имя и адрес электронной почты заполнены, проверяет ответ recaptcha и отправляет контактные данные по электронной почте клиенту и мне. Я думаю, проблема не в contact.php этом . Возможно, с данными возникла какая-то проблема с кодированием/декодированием.

3. Кстати, Please fill all the required fields. это ответ от contact.php .

4. Поскольку вы не заполнили все поля на скриншоте примера, это может быть правильным ответом

5. Поле сообщения является необязательным contact.php .

Ответ №1:

 if (isset($_POST['name']) amp;amp; isset($_POST['email']) amp;amp; isset($_POST['text']) ...

Ваша форма не содержит ввода с именем text .