JQuery и post запрос?

Question

[Domus]

Доброй ночи.

Делаю форму обратной связи для сайта. Необходимо передавать post запрос без перезагрузки страницы. Не могу нормально передать данные из формы в php.. Прошу не стрелять! Помогите пожалуйста, я уже второй день мучаюсь, кучу вариантов испробовал. Файлы подключаются нормально - везде код 200. Тестирую в Хроме, при отправке формы в Console пишет:

Uncaught SyntaxError: Unexpected end of JSON input
    at Function.parse [as parseJSON] (<anonymous>)
    at Object.success (ajax.js:17)
    at i (jquery-3.2.1.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2)
    at A (jquery-3.2.1.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery-3.2.1.min.js:4)

ajax.js

$( document ).ready(function() {
    $("#sub").click(
		function(){
			sendAjaxForm('result', 'contact', "mail/send.php");
			return false; 
		}
	);
});
 
function sendAjaxForm(result_form, ajax_form, url) {
    jQuery.ajax({
        url:     url, //url страницы (action_ajax_form.php)
        type:     "POST", //метод отправки
        dataType: "html", //формат данных
        data: jQuery("#"+ajax_form).serialize(),  // Сеарилизуем объект
        success: function(response) { //Данные отправлены успешно
        	result = jQuery.parseJSON(response);
        	document.getElementById(result_form).innerHTML = "Имя: "+result.name+"<br>Email: "+result.email;
    	},
    	error: function(response) { // Данные не отправлены
    		document.getElementById(result_form).innerHTML = "Ошибка. Данные не отправленны.";
    	}
 	});
}

send.php

<?php
if (isset($_POST["name"]) && isset($_POST["email"]) ) { 

	// Формируем массив для JSON ответа
    $result = array(
    	'name' => $_POST["name"],
    	'email' => $_POST["email"]
    ); 

    // Переводим массив в JSON
 return json_encode($result); 
}

?>

index.html

<div class="row">
                        <form id="contact" name="contact" action="" class="contact-form">
                            <fieldset class="col-md-4 col-sm-6">
                                <input type="text" id="name" name="name"  placeholder="Имя...">
                            </fieldset>
                            <fieldset class="col-md-4 col-sm-6">
                                <input type="email" id="email" name="email" placeholder="Email...">
                            </fieldset>
                            <fieldset class="col-md-4 col-sm-12">
                                <input type="text" id="subject" name="subject" placeholder="Тема...">
                            </fieldset>
                            <fieldset class="col-md-12 col-sm-12">
                                <textarea name="message" id="message" cols="30" rows="6" placeholder="Сообщение..."></textarea>
                            </fieldset>
                            <fieldset class="col-md-12 col-sm-12">
                                <div id="result">
                                <input type="submit" id ="sub" class="button big default" value="Отправить">
                                </div>
                            </fieldset>
                        </form>
                    </div>

Привел только html формы, чтобы места много не занимать.

Answer 1

[0xD34F]

Вместо return json_encode($result) наверное должно быть что-то вроде echo json_encode($result). Также непонятно, почему никак не обрабатывается ситуация, когда name и email отсутствуют.

Ещё неплохо бы добавить header('Content-Type: application/json');. Всё-таки json возвращаете.

Удалить ?> тоже не помешает - чтобы случайно не добавлять пробелы/пустые строки в ответ.

В ajax.js dataType: "html" было бы неплохо заменить на dataType: "json" - по получении ответа не придётся вызывать parseJSON, response будет объектом.

Comments

[Exploding]

Та там нет разницы, оно само преобразует. Главное чтобы пришел json именно

[Kovalsky]

Двачую эхо.

[Domus]

0xD34F: , спасибо большое за ответ!
1) return на echo заменил - ошибка осталась.
2) header('Content-Type: application/json'); добавил.
3) ?> удалил.
4) Если использовать dataType: "json", убрать parseJSON и выбрать объект response, то происходит ошибка отправления данных(из error: function(response)). Если использовать dataType: "html"без parseJSON, то, естественно, переменные undefined.

Подскажите пожалуйста. Что теперь в таком случае делать? Я вот с этим уже на два дня засел. Вроде бы и задача несложная, но где-то загвоздка..

[0xD34F]

А как выглядит ответ? Сделайте console.log(response) в коллбеке.

[Domus]

Вставил в error: function(response) {}, вот что получаю:

[0xD34F]

Пусто значит... Давайте тогда посмотрим, как выглядит Form Data при отправке запроса - раз выражение в условном операторе в send.php оказывается ложным, значит name и/или email отсутствуют.