Отправка данных формы на сервер

В прошлом разделе мы посмотрели, как заполнять форму различными способами. Но это только одна часть работы с формами. Как правило, формы нужны, чтобы отправлять данные на сервер, где они потом обрабатываются. Итак, возьмем для примера самую распространенную форму - форму ввода логина и пароля и добавим к ней функционал отправки на сервер:

Ext.onReady(function(){
	
    var loginForm=Ext.create('Ext.form.Panel',{
        title: 'Авторизация',
        width: 300,
        height:150,
		bodyPadding:10,
		layout: 'anchor',
    defaults: {
        anchor: '80%'
    },
        renderTo: Ext.getBody(),
        items: [{  
                xtype: 'textfield',
                fieldLabel: 'Логин',
                name: 'login'
            },
            {
                xtype: 'textfield',
                name: 'pass',
                fieldLabel: 'Пароль',
                inputType: 'password'
            }],
		buttons: [{
			text: 'Оправить',
			handler: function() {
				loginForm.getForm().submit({
					url: 'login.php',
					success: function(form, action){
								Ext.MessageBox.alert('Авторизация пройдена. ',action.result.message);
					},
					failure: function(form, action){ 
								Ext.MessageBox.alert('Ошибка авторизации. ',action.result.message);
							}
				});
			}
		}]
    });
});

Итак, у нас простая форма авторизации. На форме определены два текстовых поля - для ввода логина и пароля.

По нажатию на кнопку у нас срабатывает заложенный в ней обработчик. В этом обработчике реализован метод формы submit:

	loginForm.getForm().submit({
					url: 'login.php',
					success: function(form, action){
								Ext.MessageBox.alert('Авторизация пройдена. ',action.result.message);
					},
					failure: function(form, action){ 
								Ext.MessageBox.alert('Ошибка авторизации. ',action.result.message);
							}
				});

Этот метод принимает в качестве параметра url ресурс, на который будет отсылаться форма. Здесь определен файл php, однако это может быть и ресурс asp.net mvc или веб-форма asp.net и т.д.

Также в качестве параметров метода submit можно добавить необязательные параметры success и failure. Оба они принимают функцию обработки ответа сервера. Только в первом случае обрабатывается успешный ответ с сервера, а во втором случае неудачный. Каждый из обработчиков просто отображает окно сообщения, извещающее пользователя.

Теперь создадим простейший файл login.php, который и будет принимать и обрабатывать полученные данные. В реальной ситуации можно было бы задать обращение к базам данных, проверку введенных логина и пароля, но для простоты мы ограничимся простым сравнением пароля и отправкой клиенту определенного ответа:

<?php
header('Content-type: application/json');
$login=$_POST['login'];
$pass=$_POST['pass'];
if($pass=="12345"){
	echo '{"success": true, "message": "Добро пожаловать,' . $login.'"}';
}
else{
echo '{"success": false, "message": "Неправильный пароль или логин"}';
}
?>

Используя объект $_POST в php мы получаем отправленные данные формы. Поскольку у нас поле пароля имеет параметр name: 'pass', то чтобы получить переданное значение используется выражение $_POST['pass'];. Тоже самое и для логина. Затем мы сравниваем полученный пароль с некоторым значением, и в зависимости от результата посылаем обратно клиенту ответ в виде объекта json.

При получении объекта {"success": true, "message": "Добро пожаловать,' . $login.'"} поскольку он уведомляет об успешной обрботке данных формы, этот ответ будет обрабатываться функции, заданной в параметре success. Второй параметр, передаваемый в окно сообщения - action.result.message, будет включать свойство message из объекта json.