Поему ajax не возвращает ответ?

Question

[Ruslan Website]

Этот код работал

$(document).ready(function () {
    $("#ajax_form").submit(
        function () {
            sendAjaxForm('result_form', 'ajax_form', 'create-article.php');
            return false;
        }
    );
});

function sendAjaxForm(result_form, ajax_form, url) {
    jQuery.ajax({
        url: url, //url страницы (php/obr.php)
        type: "POST", //метод отправки
        dataType: "html", //формат данных
        data: jQuery("#" + ajax_form).serializeArray(), // Сериализуем объект
        success: function (response) { //Данные отправлены успешно
            result = JSON.parse(response);
            document.getElementById(result_form).innerHTML = result;
            console.log(response);
        },
        error: function (response) { // Данные не отправлены
            document.getElementById(result_form).innerHTML = "Ошибка. Данные не отправлены.";
        }
    });
}

А этот работает, но не полностью, не возвращает ответ, обработчик тот же. Т.е. когда я добавляю загрузку файла ответ от сервера не приходит.

$(document).ready(function () {
    $("#ajax_form").submit(
        function (event) {
            event.preventDefault();
            let form = $('#' + $(this).attr('id'))[0];
            let fd = new FormData(form);

            jQuery.ajax({
                url: "create-article.php", //Адрес страницы
                type: "POST", //Метод отправки
                data: fd,
                processData: false,
                contentType: false,
                success: function (response) { //Успешно
                    result = JSON.parse(response);
                    document.getElementById(result_form).innerHTML = result;
                },
                error: function (response) { //Ошибка
                    document.getElementById(result_form).innerHTML = "Ошибка";
                }
            });
        }
    );
});

Answer 1

[Надим]

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

$(function () {
	$("#ajax_form").submit(
		async function(event) {
			var form = new FormData(event.target);
			event.preventDefault();
			try {
				var response = await $.ajax({
					url: 'create-article.php',
					type: 'POST',
					data: form,
					processData: false,
					contentType: false
				});
				console.log("Ответ серввера:\n" + response);
				alert("Ответ серввера:\n" + response);
			}
			catch(err) {
				alert('Ошибка отправки, детали см. в консоли!');
				console.log('Не удалось отправить форму:');
				console.error(err);
			}
		}
	);
});

Comments

[Ruslan Website]

Все равно не выходит, в консоль ответ правильный а в innerHTML не записывает, почему?

[Надим]

Ruslan Website, потому что вы пытайтесь записать ответ в несуществующий элемент. Вы похоже вообще не вдупляете как работает innerHTML.

Для начала вам нужно определится в какой из блоков хотите записать ответ. Допустим вы хотите вывести ответ сервера внутри блока с id равным qwerty, тогда нужно выполнить:

document.querySelector('#qwerty').innerHTML = response;

Разумеется блок с таким id обязательно должен присутствовать на странице!

Код полностью:

$(function () {
  $("#ajax_form").submit(
    async function(event) {
      var form = new FormData(event.target);
      event.preventDefault();
      try {
        var response = await $.ajax({
          url: 'create-article.php',
          type: 'POST',
          data: form,
          processData: false,
          contentType: false
        });
        document.querySelector('#qwerty').innerHTML = response;
        console.log("Ответ серввера:\n" + response);
      }
      catch(err) {
        alert('Ошибка отправки, детали см. в консоли!');
        console.log('Не удалось отправить форму:');
        console.error(err);
      }
    }
  );
});

[Ruslan Website]

Я знаю, но ведь он ведь эта строка

document.getElementById(result_form).innerHTML = result;

как раз и брала элемент с id="result_form" и успешно записывала в него ответ, почему перестало работать не понятно, но оно точно работало.

[Надим]

Ruslan Website, понятно все с вами. Вы кавычки забыли вокруг result_forrm. Делайте так:

document.querySelector('#result_form').innerHTML = response;

[Ruslan Website]

Надим Закиров, я отвечаю что работало без ковычек, не знаю что я поменял но теперь работает только с ковычками

[Надим]

Ruslan Website, работало без кавычек когда вы в переменной result_form указывали id блока, потом вы перестали в эту переменную что-либо класть, вот и ошибка.