san_jorich
@san_jorich
Творческий кодер

Как правильно реализовать Ajax Передачу данных из ui-dialog в php обработчик?

Здравствуйте!
Если можно, приведите пример js отправляющий данные на php обработку и из "условного div_а #dialog" c подгруженной в него ранее формой редактирования
Кусок примерного, не работающего правильно кода:
$('body').on('click','#edit_role', function(){ 
		
		$.ajax({
		  type: 'POST',
		  url: '/../../../functions.php',
		  data : { action : 'edit_role',role_id: this.getAttribute("role_id") },
		  success: function(response){
		  	$( "#ajax_result").html(response);
			$( "#edit_role_form" ).dialog({
		      resizable: false,
		      height: "auto",
		      width: 550,
		      modal: true,
		      buttons: {
		        "Сохранить изменения": function() {
		       console.log(role_id); //test_mode
		        },
		        "Отмена": function() {
		          $( this ).dialog( "close" );
		        }
		      }
		    });

		  } 
		});
	});

Простите, если вопрос покажется глуп.. форму редактирования без перезагрузок создать хочется. В JS не давно
  • Вопрос задан
  • 143 просмотра
Решения вопроса 1
Exomode
@Exomode
Архитектор ПО
$(document).on("submit", "#your_form", function (e) {
    var id = $("#your_form input[name='id']").val() >> 0;
    var login = $("#your_form input[name='login']").val();
    var request = {};

    if (id > 0) {
        request["id"] = id;
    }

    if (login) {
        request["login"] = login;
    }

    $.post("/handler.php", request).done(function (response) {
        if (response) {
             alert(response);
             return;
        }

        window.location.href = "/new/address/";
    });

    return false;
});


if (!isset($_POST["id"]) || !isset($_POST["login"])) {
    echo "ID и логин обязательны для заполнения";
    exit;
}

// Обработать $_POST["id"] и $_POST["login"], предусмотреть валидацию и экранирование спецсимволов

exit;


Используйте метод $.ajax лишь в случае, если вам важна тонкая настройка взаимодействия с сервером или, например, для добавления файлов в форму после их превалидации на клиенте. Для всех остальных случаев методов $.post и $.get более чем достаточно.

В данном примере я вешаю на событие onsubmit обработчик через $(document).on(), для того, чтобы событие отработало даже если форма была добавлена в DOM уже после загрузки документа. Затем я получаю два поля формы, первый привожу к int с помощью >> 0 (это самый простой и самый производительный способ привести переменную к типу int в JavaScript), а второе поле у меня string. Далее я формирую параметры запроса к серверному обработчику (скрипт /handler.php), предварительно проверив данные на присутствие в форме и корректность int (по моим условиям, он должен быть unsigned), после чего я отправляю данные на обработчик и жду ответа, ответ я получаю в коллбэке done(response), где обрабатываю его. Если ответ пришел - значит ошибка и вывожу в алерте на экран, иначе все валидно и делаю редирект на другой адрес. В конце обработчика формы я прописал return false, если этого не сделать, то форма автоматически перейдет по адресу, указанному в атрибуте action, что нарушит задуманную логику и браузер даже не успеет вывести алерт в случае ошибки.

С серверным скриптом обработки думаю все и так ясно и объяснять не стоит.

Данный пример я накидал на импровизации, это один из множества способов реализации необходимой вам задачи и не претендует на эталон, Вы вправе закодировать нужную вам логику как вашей душе угодно как на стороне клиента, так и на серверсайде.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы