How to send data in json format if html comes?

J

Johnny Show2019-11-07 18:34:58

PHP

Johnny Show, 2019-11-07 18:34:58

Normal submission form.
The method of sending data is via Ajax in Json format.
When sending data, I get an error in the console: errorThrown: SyntaxError: Unexpected end of JSON input
I understand that the data comes in html format, but json format is needed.
So far, I have not been able to solve this problem, maybe you can throw ideas for solving this issue. Thank you!
PHP:

class Contact
{

    //Обработка формы
    public function contactData()
    {
        $name = isset($_POST['name']) ? $_POST['name'] : null;
        $surname = isset($_POST['surname']) ? $_POST['surname'] : null;
        $email = isset($_POST['email']) ? $_POST['email'] : null;
        $phone = isset($_POST['phone']) ? $_POST['phone'] : null;

        //результат промежуточных данных об успехе\ошибках
        $resData = array();

        // Валидация полей
        if (!$this->checkName($name)) {

            $resData['success'] = 0;
            $resData['message'] = 'Неправильное Имя!';
        }

        if (!$this->checkName($surname)) {
            $resData['success'] = 0;
            $resData['message'] = 'Неправильная Фамилия!';
        }

        if (!$this->checkEmail($email)) {
            $resData['success'] = 0;
            $resData['message'] = 'Неправильный email!';
        }
        if (!$this->checkPhone($phone)) {
            $resData['success'] = 0;
            $resData['message'] = 'Неправильный номер телефона!';
        }
        if (!$resData) {
            $resData['success'] = 1;
            $resData['message'] = "Ваши данные! <br/>";
        } else {
            $resData['success'] = 0;
            $resData['message'] = 'Ошибка Отправки данных!';
        }
        echo json_encode($resData, JSON_UNESCAPED_UNICODE);
     }



    public function clearData($data)
    {
        $data = trim(strip_tags(stripslashes(htmlspecialchars($data))));

        return $data;
    }

    public function checkEmail($email)
    {
        $email = $this->clearData($email);
        if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
            return true;
        }
        return false;
    }

    public  function checkName($name)
    {
        $name = $this->clearData($name);
        if (strlen($name) >= 2) {
            return true;
        }
        return false;
    }

    public function checkPhone($phone)
    {
        $phone = $this->clearData($phone);
        if (filter_var($phone, FILTER_VALIDATE_INT	)) {
            return true;
        }
        return false;
    }
}

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Форма отправки</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/form.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
    <link href='https://bootstraptema.ru/snippets/form/2017/recaptcha/custom.css' rel='stylesheet' type='text/css'>
</head>
<body>

<div class="container">

    <div class="row">

        <div class="col-lg-8 col-lg-offset-2">

            <h1 class="text-center">Форма отправки</h1>

            <form id="contact-form" method="post" action="" role="form">

                <div class="messages"></div>

                <div class="controls">

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="name">Firstname *</label>
                                <input id="name" type="text" name="name" class="form-control" placeholder="Пожалуйста, введите ваше имя *">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="lastname">Lastname *</label>
                                <input id="lastname" type="text" name="surname" class="form-control" placeholder="Пожалуйста, введите свою фамилию *">
                            </div>
                        </div>
                    </div>

                    <div class="row">

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="email">Email *</label>
                                <input id="email" type="email" name="email" class="form-control" placeholder="Пожалуйста, введите свой email *">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="phone">Phone *</label>
                                <input id="phone" type="tel" name="phone" class="form-control" placeholder="Пожалуйста, введите ваш телефон*">
                            </div>
                        </div>
                    </div>


                        <div class="col-md-12">
                            <input type="submit" class="btn btn-success btn-send" value="Send message">
                            <div id="messageShow" style="color:red"></div>
                            <p>Результат запроса:</p>
                            <p class="regOk"></p>

                        </div>
                </div>

                </div>

            </form>
        </div><!-- /.col-lg-8 col-lg-offset-2 -->

    </div> <!-- /.row-->
</div> <!-- /.container-->
</body>
</html>

JS:

$(document).ready(function(){

    //проверка полей
    function check(message) {
        if (message) {

            $('#messageShow').html(message);
            $('#messageShow').show();
        }
    }

    $('#contact-form').submit(function (event) {
        event.preventDefault();
        var name = $('#name').val();
        var lastname = $('#lastname').val();
        var email = $('#email').val();
        var phone = $('#phone').val();

        var error = false; // прeдвaритeльнo oшибoк нeт
        var msg = [];

        //проверка имени
        if ( name.length < 2) {
            msg = 'Имя не должно быть короче 2-х символов';
            check(msg);
            error = true; 
        }



    else if (lastname.length < 2) {
            msg = 'Фамилия не должна быть короче 2-х символов';
            check( msg);
            error = true; 
        }
        else if ( email == '') {
            msg = 'Введите корректный эмейл';
            check(msg);
            error = true; 
        }
        else if ( phone == '' || !phone.replace (/\D/g, '')) {
            msg = 'Введите корректный номер телефона';
            check( msg);
            error = true; 
        }
        if ( !error) {
            check( msg);

            //записываем в массив данные
            var postData = {
                name: name,
                lastname: lastname,
                email: email,
                phone: phone,
            };


            $.ajax({
                type: 'POST',
                url: 'contact.php',
                data: postData,
                dataType: 'json',
                success: function (result) {

                    console.log('OK!');
                    if (result['success']) {

                        $('.regOk').html(result['message']).fadeOut(10000); //вывод успеха редактирования на страницу
                    }
                },
                error: function(jqxhr, textStatus, errorThrown) {
                    console.log("jqXHR: ", jqxhr);
                    console.log("textStatus: ", textStatus);
                    console.log("errorThrown: ", errorThrown);
                    alert('ОШИБКА!!');
                }
            });
            return false;
        }
    });
});

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

T

ThunderCat, 2019-11-07
@ThunderCat

developer tools-> network-> see your request, what was returned there-> think