Я хочу поделится своим опытом работы с JQuery для генерации AJAX запросов. Думаю что интересно будет не только новичкам.
Допустим, у нас есть какой-то проект, который находится на такой стадии разработки, что основной серверный функционал отлажен, дизайн существует в виде каркасов страниц. Нам ставят задачу - сделать обработку всех форм (причем для разных контроллеров) с помощью Аякса. Вполне понятно, что хотелось бы реализовать простой, удобный, а самое главное - универсальный механизм обработки AJAX запросов.
Для начала, нам понадобится подключить собственно сам JQuery, а также плагин JQuery Form. Советую создать JScript файл в котором мы и будем хранить наши универсальные методы обработки (удобно назвать например general.js).
В нем создаем такую функцию:
function FormSubmit(id,url,func){
var params = $("#"+id).formSerialize();
$.post(url,params, function(response){
if(StatusOk(response)){
call_func(func,response);
}else{
ShowValidation(response);
}
});
}
Функция принимает 3 параметра:
1 - ID формы со страницы, для того чтобы можно было сериализировать данные формы для отправки
2 - URL скрипта который будет обрабатывать запрос
3 - имя JScript функции-обработчика ответа
Добавим соглашение, что результатом обработки запроса, сервер вернет или текст валидационной ошибки, или: $id."Ok!"
Где id - номер обработанной записи в БД, или номер созданной записи и т.п.
StatusOk(response) - проверяет ответ сервера и возвращает TRUE если он успешный.
Код функции ниже:
function StatusOk(str){
var re = /Ok!/;
var result = re.test(str) ? true : false;
return result;
}
Метод call_func(func,response) вызывает функцию по имени func и передает ей ответ сервера как параметр.
Реализацию привожу ниже:
function call_func(func, param){
if(func!='') window[func](param);
}
Эта функция позволяет динамически вызывать функции по имени с передачей ей параметров.
ShowValidation(response) - стандартный метод в котором вы будете обрабатывать валидационные сообщения, например выводить их в какой-то общий див со специальным стилем.
Такой подход позволяет очень гибко обрабатывать формы. Например, мы в форме на кнопочку вешаем обработчик onclick='FormSubmit("form_id","/users/update", "userCreate")'
Наша функция соберет данные с формы заданной через id, передаст их на url скрипта обработки, после чего в случае успешного ответа - вызовет ф-ю userCreate (ее надо не забыть создать) и передаст туда ответ сервера для дальнейшей обработки. Как правило, эта функция должна обновлять набор данных на странице после их изменения (создание, редактирование). Если в ответе сервера не присутствует признак успешной операции, то значит ответом является валидационное сообщение которое надо отобразить.
Таким образом, все AJAX запросы выполняются в одном месте. Добавлением третьего параметра - вызов call-back функции, мы добавляем невероятную гибкость нашему методу. Он позволит вынести индивидуальную обработку ответа в нужное место в каждом конкретном случае. При этом, в call-back функции нам не надо заботится о Аяксе и о том как туда попали параметры.
Когда все запросы обрабатываются в одном месте, то вероятность возникновения ошибок, стремится к нулю. Необходимо только придерживаться соглашений для ответа сервера.
Вы можете всячески усовершенствовать данный механизм, который здесь приводится в облегченном варианте. Надеюсь что данный подход будет вам интересен и использован в своих приложениях.
