Объединить ajax

195

06 мая 2018, 18:39

Имеется много ajax на разных страницах. Можно ли сделать так чтобы постоянно не писать ajax для каждой формы, а сделать что-то универсальное. Может есть готовые решения? Я вот набросал свой вариант, правильна ли такая реализация?

$(".ajax").submit(function(e){
        var $form = $(this);
        $.ajax({
            url: $form.attr("action"),
            type: $form.attr("method"),
            data: $form.serialize(),
            dataType: "json",
            beforeSend: function() {
                var $btnsubmit = $form.find(".btn-submit");
                if( $btnsubmit.attr("data-load") ) {
                    $btnsubmit.addClass( $btnsubmit.attr("data-load") );
                    $btnsubmit.attr("disabled", true);
                }
            }
        }).done(function(data){
            console.log( data );
            $.each(data, function(i) {
                if(data[i].action == 'reload')
                {
                    location.reload();
                }
                if(data[i].action == 'redirect')
                {
                    window.location.replace(data[i].link);
                }
                if(data[i].action == 'alert')
                {
                    alert(data[i].text);
                }
                if(data[i].action == 'modal')
                {
                    $(data[i].id).modal({
                        clickClose: false
                    });
                    $(data[i].id + " .ok").click(function(){
                        if(data[i].modalOk == 'reload')
                        {
                            location.reload();
                        }
                    });
                }
                if(data[i].action == 'addclass')
                {
                    $(data[i].element).addClass(data[i].class);
                }
                if(data[i].action == 'removeclass')
                {
                    $(data[i].element).removeClass(data[i].class);
                }
                if(data[i].action == 'changetext')
                {
                    $(data[i].element).text(data[i].text)
                }
                if(data[i].action == 'changehtml')
                {
                    $(data[i].element).html(data[i].html)
                }
                if(data[i].action == 'changeval')
                {
                    $(data[i].element).val(data[i].val);
                }
                if(data[i].action == 'changevalselect')
                {
                    $(data[i].element).val(data[i].val).change();
                }
                if(data[i].action == 'show')
                {
                    $(data[i].element).show();
                }
                if(data[i].action == 'hide')
                {
                    $(data[i].element).hide();
                }
                if(data[i].action == 'attr')
                {
                    $(data[i].element).attr(data[i].name, data[i].attr);
                }
            });
        }).fail(function(data){
            console.log( data );
        }).always(function(data){
            var $btnsubmit = $form.find(".btn-submit");
            if( $btnsubmit.attr("data-load") ) {
                $btnsubmit.removeClass( $btnsubmit.attr("data-load") );
                $btnsubmit.attr("disabled", false);
            }
        });
        e.preventDefault();
    });

Суть такая что каждая форму, у которой есть класс ajax, отправляется методом ajax. В ответ приходит json с массивом действий.

Answer 1

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

Для себя я написал 1 функцию, которая в коллбэке возвращает мне результат запроса.

function sendAjaxRequest(search, obj, callback){
    var data = JSON.stringify(obj);
    var xhr = new XMLHttpRequest();
        xhr.open("POST", search, true);
        xhr.setRequestHeader("Content-Type", "text/plain");
        xhr.send(data);
        console.log("Запрос ушел")
        xhr.onreadystatechange = function(){
            if (xhr.readyState !=4) return;
            if(xhr.status == 200) {
                return callback(xhr.responseText);
            }
        };

};

пример использования:

sendAjaxRequest("/cart", {id:1}, function(result){
    console.log(result)
})

Конечно, эта функция не лишена недостатков (не кроссбраузерная, например) - но для понимания - пойдет. У участника SO @Air, видел кроссбраузерную. Поищите у него или в ответах или в вопросах.