Универсальный jquery ajax для новичков.
Все уже давно научились пользоваться аяксом от популярной библиотеки jquery.
Но есть одно но, часто копипаст побеждает логическую универсальность.
В итоге, для каждого функционала отправки формы пишется свой скрипт.
Предлагаю любителям тиражировать однотипный код короткий универсальный скрипт.
Вот он миленький:
Как им пользоваться:
размещаем форму, в теге form обязательно прописать класс "ajax-form"
Путь отправки формы прописывается в атрибут action все тогоже тега form
Получится что-то типа этого:
Еще нам нужно сообщать пользователям о том что, форма отправляется, для этого у нас есть прелоадер.
Есть простенькая проверочка на пустоту обязательных полей, которые помечены классом "required"
Вот и все, теперь для отправки, на вашем сайте, любой формы аяксом, вам нужно только добавить форме класс "ajax-form"
Заранее благодарен за конструктивные дополнения в комментах.
Спасибо за внимание.
Все уже давно научились пользоваться аяксом от популярной библиотеки jquery.
Но есть одно но, часто копипаст побеждает логическую универсальность.
В итоге, для каждого функционала отправки формы пишется свой скрипт.
Предлагаю любителям тиражировать однотипный код короткий универсальный скрипт.
Вот он миленький:
$(document).on( "submit", ".ajax-form", function(event){
var $this = $(this), send = 1, val='';
$this.find('.required').each(function(){
val = $(this).val();
if(!val || val == '' || val == 'undefined')
{
$(this).css('border','1px solid red');
send = 0;
}
})
if(send == 1)
{
$.ajax({
beforeSend: function(){$this.parent().html('<div class="loader" />');},
complete: function(){$('.loader').hide();},
type: "POST",
url: $this.attr('action'),
data: $this.serialize(),
success: function(res) {
$this.parent().html(res);
}
});
}
return false;
}); |
размещаем форму, в теге form обязательно прописать класс "ajax-form"
Путь отправки формы прописывается в атрибут action все тогоже тега form
Получится что-то типа этого:
<form action="/ajax/auth.php" class="ajax-form" method="post"> |
Еще нам нужно сообщать пользователям о том что, форма отправляется, для этого у нас есть прелоадер.
<style>
.loader{
display: block;
width: 124px;
height: 124px;
background: url('/img/loading.gif');
margin: auto;
}
</style> |
Есть простенькая проверочка на пустоту обязательных полей, которые помечены классом "required"
Вот и все, теперь для отправки, на вашем сайте, любой формы аяксом, вам нужно только добавить форме класс "ajax-form"
Заранее благодарен за конструктивные дополнения в комментах.
Спасибо за внимание.
jquery не берем, у меня как у универсального 
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».
