Почему при отправке данных с помощью ajax ответ сервера NULL?

Question

[nanny_ogg]

Форма

<form id="feedback-form-call-request" class="feedback-form" method="POST">
 <input class="input-field visitor-name disabled" type="text" name="visitor-name" value="" placeholder="Ваше имя" required="required">
 <input class="input-field visitor-phone disabled" type="text" name="visitor-phone" value="" placeholder="Номер телефона" required="required">
 <select name="visitor-section">
	<option value="Компьютеры">Компьютеры</option>
	<option value="Серверы">Серверы</option>
	<option value="Монтаж">Монтаж</option>
	<option value="1С обслуживание">1С обслуживание</option>
	<option value="Сайты" selected="selected">Сайты</option>
	<option value="Продвижение">Продвижение</option>
 </select>
 <input class="input-field visitor-time disabled" type="text" name="visitor-time" value="" required="required" placeholder="Удобное время">
 <div id="result-message"></div>
 <button class="request-button call_request disabled" type="submit" name="call_request">Заказать звонок</button>
</form>

Скрипт

$('#feedback-form-call-request').submit(function(event){
		event.preventDefault();
		var msg = $(this).serialize();
		$.ajax({
			type: 'POST',
	        url: 'mail_handler.php',
	        data: msg,
	        success: function(data) {
	        	$('#result-message').html(data);
	        },
	        error:  function(xhr, str){
		    	alert('Возникла ошибка: ' + xhr.responseCode);
	        }
		});
	});

Обработчик
var_dump($_POST['data']);
Ответ сервера при этом пустой массив. Если заменить переменную msg на строку с текстом - приходит NULL . В чем может быть проблема?

Comments

[ckr]

Может быть, он отправляет эту форму два раза?

[ckr]

ckr: event.preventDefault(); используешь, а как же event.stopPropagation()?

[ckr]

и почему var_dump($_POST['data']); ??? можешь выполнить var_dump($_POST); ???

[nanny_ogg]

ckr: в файрбаге смотрю, вроде один. ответ 200, сериализуется все, в POST все поля, которые нужны, а ответ NULL

[ckr]

var_dump($_POST); ???

[ckr]

фаэрбаг мертв, да здравствует devtools

[nanny_ogg]

var_dump($_POST); вернул все, что нужно. Спасибо, что-то тупанула

Answer 1

[Alexander Smirnov]

Во-первых, обратите внимание что массива data в Вашем коде не существует var_dump($_POST['data']);

Во-вторых, лучше воспользуйтесь плагином jquery.form.js

Тогда Ваш код будет таким:

<form action="mail_handler.php" id="feedback-form-call-request" class="feedback-form" method="POST">
<div id="output"></div>

$(function() {
    $("#feedback-form-call-request").on("submit", function(e) {
        e.preventDefault();
        $(this).ajaxSubmit({
            dataType: "json", // "html", 
            beforeSubmit: function() {
                // скрываем старые сообщения об ошибках перед отправкой формы
            },
            success: function(resp) {
               // показываем ошибки или сообщение об успешной отправке
            }
        });
    });
});

В-третьих, лучше чтобы обработчик возвращал не html код, а json-объект.

// различные правила валидации
if () {
    $result = ['error' => 0, 'msg' => 'Объект успешно сохранен.'];
} else {
    $result = ['error' => 1, 'msg' => 'Исправьте ошибку: заполните поле такое-то.'];
}
echo json_encode($result);

Тогда вы можете кастомизировать сообщения и отдельные события в обработчике.

success: function(resp) {
     // показываем ошибки или сообщение об успешной отправке
    if (resp.error == 0) {
        $("#output").attr("class", "alert alert-success").html(resp.msg);
    } else {
       $("#output").attr("class", "alert alert-danger").html(resp.msg);
    }
}

Answer 2

[ckr]

https://www.mozilla.org/ru/firefox/developer/

Comments

[nanny_ogg]

спасибо, попробую