Функция позволяет реализовать простую подгрузку и изменение данных полученных с вашего сервера. | Описание возможностей в комментариях

LoadPostServer.js

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // GLOBAL_url_js = url("Temp_All_product", "funct2.js");      // путь до дополнительного файла js
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    $(document).ready(function() {

        window.SERVER_url = '/SERVER/SERVER.php'; // URL до СЕРВЕРА
    });

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// получаем ИМЯ подгружаемого ШАБЛОНА и отправляем на сервер с ИНДИФИКАТОРОМ зарегистрированого
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    function CORELoadTemp(temp, key, funct='', options='') {

        if (funct != '') {

            var funct_try = funct.split('|');

            // выполняем функцию при старте
            if (funct_try[1] == 'Start') {

                var ret_options = eval(funct_try[0]);

            } else if (funct_try[1] == 'both') {

                var ret_options = eval(funct_try[0]);

            } else {

                var ret_options = eval(funct);
            };
        };

        var dop_options = $(temp).attr('data-options');

        if (dop_options == undefined) {
            dop_options = '';
        };

        if (ret_options == undefined) {
            ret_options = '';
        };

        resultSet = window.REG_user +'&temp='+ key + options + dop_options + ret_options;

        $.ajax({
            type: 'POST',
            url:   window.SERVER_url,
            data:  resultSet,
            success: function(response){

                $(temp).html(response);
                if (response) {
                    console.log('загружен шаблон: '+key+' в эллемент с индификатором: '+temp);
                };
                
            }
        })

        if (funct != '') {

            var funct_try = funct.split('|');

            // выполняем функцию при старте
            if (funct_try[1] == 'end') {

                eval(funct_try[0]);

            } else if (funct_try[1] == 'both') {

                eval(funct_try[2]);
            }
        };
    };

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// получаем ИМЯ подгружаемого ШАБЛОНА и отправляем на сервер с ИНДИФИКАТОРОМ зарегистрированого
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                                                    
    function CORECloseTemp(temp) {
                                                        
        $(temp).html('');
        
    };

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// АВТОМАТИЧЕСКИЙ ПОИСК И ЗАКРЫТИЕ ШАБЛОНОВ
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    function CloseTemp() {

        $('[tempClose=""]').each(function () {

            var temp = $(this).attr('data-close-temp');
            CORECloseTemp(temp);
        });
    };

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// АВТОМАТИЧЕСКИЙ ПОИСК И ПЕРЕЗАГРУЗКА ШАБЛОНОВ
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    function ResetTemp() {

        $('[tempLoad=""]').each(function () {

            var temp    = $(this).attr('data-temp');
            var key     = $(this).attr('data-key');
            var options = $(this).attr('data-options');
            var funct   = $(this).attr('data-fun');
            
            CORELoadTemp(temp, key, funct, options);
            CloseTemp();
        });
    };

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// (УНИВЕРСАЛ) Универсальная функция шаблонизатора с возможностью подключения функции 
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    $(document).on('click', "[act='']", function(event){
        event.preventDefault();
        
        var temp        = $(this).attr('data-temp');
        var key_php     = $(this).attr('data-key');
        var options     = $(this).attr('data-options');
        var funct       = $(this).attr('data-funct');
        var show        = $(this).attr('data-show');

        if (funct  == undefined || funct == '') {

            ret_options = '';

        } else {

            var funct_try = funct.split('|');

            // выполняем функцию при старте
            if (funct_try[1] == 'Start') {

                var ret_options = eval(funct_try[0]);

            } else if (funct_try[1] == 'both') {

                var ret_options = eval(funct_try[0]);

            } else {

                var ret_options = eval(funct_try[0]);
            };
        };

        if (options == undefined || options == '') {

            options = '';
        };

        if (temp == undefined) {

        } else {

            var key_php_t = key_php.split('|');

            if (key_php_t[0] == '') {

                ShowTemp (temp, show, key_php_t[1]);

            } else {

                var resultSet = window.REG_user +'&temp='+ key_php + options + ret_options;

                $.ajax({
                    type: 'POST',
                    url:   window.SERVER_url,
                    data:  resultSet,
                    success: function(response){

                        ResetTemp();

                        if (response) {
                            console.log('загружен шаблон: '+key_php+' в эллемент с индификатором: '+temp);
                        };

                        ShowTemp (temp, show, response);
                    }
                })

            };
        };

        if (funct  == undefined) {

            // нет исполняймых функций

        } else {

            var funct_try = funct.split('|');

            // выполняем функцию при старте
            if (funct_try[1] == 'end') {

                eval(funct_try[0]);

            } else if (funct_try[1] == 'both') {

                eval(funct_try[2]);

            }
        };
    });

    function ShowTemp (temp, show, response, close=false) {
        setTimeout(function() {

            if (show == 'worning') {

                $(temp).html('');
                $(temp).fadeOut(0);

                $(temp).html(response);
                $(temp).fadeIn(0);

                if (close == true) {
                    $('[id="close"]').fadeIn(0);
                };

                setTimeout(function() {
                    $(temp).fadeOut();
                    if (close == true) {
                        $('[id="close"]').fadeOut(0);
                    };
                }, 1900);

            } else if (show == 'show') {

                if (close == true) {
                    $('[id="close"]').fadeIn(0);
                };

                $(temp).html(response);
                $(temp).fadeIn(0);

            } else if (show == 'insert') {

                $(temp).html(response);

            } else if (show == 'show_close') {

                $(temp).html('');
                $(temp).fadeOut(0);

                $(temp).html(response);
                $(temp).fadeIn(0);

                if (close == true) {
                    $('[id="close"]').fadeIn(0);
                };

            } else {

                // без отображения полученных данных
                $(temp).html(response);
            };
        }, 100);
    }

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ЭЛЛЕМЕНТЫ С АТРИБУТОМ (start-load='не загружен') БУДУТ СРАЗУ ЗАГРУЖЕНЫ И АТРИБУТ СМЕНИТСЯ НА (start-load='загружен')
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    function SetLoadGall (this_temp) {

        var temp_rel    = $(this_temp).attr('data-temp');
        ////////////////////////////////////////////////////
        var key_php     = $(this_temp).attr('data-key');
        var options     = $(this_temp).attr('data-options');
        var funct       = $(this_temp).attr('data-funct');
        ////////////////////////////////////////////////////
        CORELoadTemp(temp_rel, key_php, funct, options);
    }

    function SL () {
        
        $('[start-load]').each(function (index, element) {

            if ($(element).attr('start-load') == 'не загружен') {

                ////////////////////////////////////////////////////
                var temp        = $(element).attr('data-temp');
                ////////////////////////////////////////////////////
                var key_php     = $(element).attr('data-key');
                var options     = $(element).attr('data-options');
                var funct       = $(element).attr('data-funct');
                ////////////////////////////////////////////////////
                
                CORELoadTemp(temp, key_php, options, funct);
                
                $(element).attr('start-load', 'загружен');

                console.log('-----------------------------------------------------------------------------------');
                console.log('NAME FUNCTION: SL (start-load)');
                console.log('-----------------------------------------------------------------------------------');
            }
        });
        
        setTimeout(function () {

            SL();

        }, 500);
    } $(document).ready(function() { SL(); });

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// РЕКУРСИВНОЕ ПРИМЕНЕНИЕ ФУНКЦИИ КО ВСЕМ НАЙДЕНЫМ ЭЛЛЕМЕНТАМ ПО АТРИБУТУ
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    function FunAllItemLoad(item, set_fun) {

        var arr = [];

        $(item).each(function (index, element) {

            // console.log(window.reload_temp[$(element).attr('data-temp')]);

            if (window.reload_temp[$(element).attr('data-temp')] == undefined) {

                arr.push(eval(set_fun));

            } else {

                
            };
        });
        
        setTimeout(function () {

            FunAllItemLoad('[reload-temp=""]', 'GetRecurs($(this))');

        }, 1000);
    }

    window.reload_temp = [];
    window.ferst_load_temp = [];
    FunAllItemLoad('[reload-temp=""]', 'GetRecurs($(this))');

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// РЕКУРСИВНАЯ ПЕРЕЗАГРУЗКА ШАБЛОНОВ 'релоад работает'
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    function Recurs(time, arr, check) {

        var res = $(check).attr('data-check');

        if (window.ferst_load_temp[check] == check) {

            time_w = time;

        } else {

            time_w = 0;
            window.ferst_load_temp[check] = check;
        };

        if (res == 'выкл') {
            window.reload_temp[check] = 'выкл';
        };

        if (window.reload_temp[check] == 'вкл') {

            setTimeout(function () {
                
                CORELoadTemp(arr[0], arr[1], arr[2], arr[3]);
                Recurs(time, arr, check);
                
                console.log(window.reload_temp[check], check);

            }, time_w);
        };
    };

    ///////////////////////////////////////////////////////////////////
    // ВЫКЛЮЧАЕТ постоянную перезагрузку шаблона с классом
    $(document).on('click', "[off-reload]", function(event){
        event.preventDefault();
        
        $('[data-key="'+$(this).attr('off-reload')+'"]').attr('data-check', 'выкл');
    });
    
    ///////////////////////////////////////////////////////////////////
    // ВКЛЮЧАЕТ постоянную перезагрузку шаблона с классом
    $(document).on('click', "[on-reload]", function(event){
        event.preventDefault();
        
        $('[data-key="'+$(this).attr('on-reload')+'"]').attr('data-check', 'вкл');
    });

    function OffOnReload (argument, check='переключать') {

        if (check == 'вкл') {

            $('[data-key="'+argument+'"]').attr('data-check', 'вкл');

        } else if (check == 'выкл') {

            $('[data-key="'+argument+'"]').attr('data-check', 'выкл');

        } else {

            if (check == 'переключать') {

                var res = $('[data-key="'+argument+'"]').attr('data-check');

                if (res == 'вкл') {

                    $('[data-key="'+argument+'"]').attr('data-check', 'выкл');

                } else {

                    $('[data-key="'+argument+'"]').attr('data-check', 'вкл');
                };
            };

        };
    }

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// РЕКУРСИВНАЯ ПЕРЕЗАГРУЗКА ШАБЛОНОВ 'релоад работает'
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    function RecRe() {

        for (key in window.reload_temp){

            if (window.reload_temp[key] == 'выкл') {

                if ($(key).attr('data-check') == 'вкл') {

                    GetRecurs(key);
                };
            };
        };

        setTimeout(function () {

            RecRe();

        }, 1000);
    }; RecRe();

    function GetRecurs(this_temp) {

        // время
        var time        = $(this_temp).attr('data-time');
        ////////////////////////////////////////////////////
        // var temp_rel = $(this_temp).attr('data-temp');
        var temp        = $(this_temp).attr('data-temp');
        ////////////////////////////////////////////////////
        var key_php     = $(this_temp).attr('data-key');
        var options     = $(this_temp).attr('data-options');
        var funct       = $(this_temp).attr('data-funct');
        ////////////////////////////////////////////////////
        var check_rel   = $(this_temp).attr('data-check');
        var check       = check_rel.split('|');
        ////////////////////////////////////////////////////

        if (check[1] != undefined) {

            ////////////////////////////////////////////////////
            // переключатель (вкл|выкл)
            window.reload_temp[check[0]] = check[1];
            ////////////////////////////////////////////////////
            
            ////////////////////////////////////////////////////
            // инициализация рекурсии
            var arr = [temp, key_php, funct, options];
            Recurs(time, arr, check[0]);

            alert('as');

        } else {

            ////////////////////////////////////////////////////
            // переключатель (вкл|выкл)
            window.reload_temp[temp] = check_rel;
            ////////////////////////////////////////////////////
            console.log(check_rel);
            ////////////////////////////////////////////////////
            // инициализация рекурсии
            var arr = [temp, key_php, funct, options];
            Recurs(time, arr, temp);
        };
    }

Шаблонизатор реализующий MVC структуру вашего приложения.

Данный шаблонизатор позволяет вам создать абсолютно любой функционал способный получать, обрабатывать и передавать любые данные с помощью вашего сервера.

Для начала работы подключите файл в шапке сайта.
<script src="/LoadPostServer.js"></script>

Укажите шаблонизатору где находится сервер (путь указывается от корня сайта в шапке подключенного файла)
window.SERVER_url = '/SERVER/SERVER.php';

ВОЗМОЖНОСТИ ПРИ РАБОТЕ В HTML ДОКУМЕНТЕ БЕЗ НЕОБХОДИМОСТИ ПИСАТЬ JS КОД

У вас есть возможность загрузить необходимый шаблон, не касаясь JS кода.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*
<temp tempLoad 
            data-temp="name_temp"                  <!-- укажите имя шалона куда загрузить данные с сервера -->
            data-key='key_server'                  <!-- укажите ключ для инициализации необходимого алгоритма на сервере -->
            data-options='&options1=item1'         <!-- укажите доп. POST параметры (возможна генерация с помощью JS/JQ скриптов) -->
            data-fun='function()|Start|end|both'/> <!-- укажите имя функции время её старта через прямой слэш |Start|end|both -->
*/    
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Прямо в HTML документе укажите список блоков которые будут закрываться при инициализации других блоков.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*
<temp tempClose data-close-temp='#block_1'/>
<temp tempClose data-close-temp='#block_2'/>
<temp tempClose data-close-temp='#block_3'/>
*/    
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Вы можете вешать обработку на любой HTML блок.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*
 <a act block
        data-temp     ='#worning'           <!-- имя шаблона | первый символ указывает (.) или (#) -->
        data-key      ='user_giv_garden'    <!-- имя ключа для инициализации на сервере (SERVER) -->
        data-options  =''                   <!-- свои опции: &options1=varable1&options2=varable2 -->
        data-funct    =''                   <!-- своя функция() - function();   function()|Start|end|both -->
        data-show     ='show'               <!-- действие: worning|show|insert|show_close|function -->
        href='#'> Отправить запрос на сервер</a>
*/    
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

В data-temp нужно указать в какой блок будет загружена информация. Можно указать загрузку прямо в текущий блок:

• data-temp = '#id' (ищет блок по индификатору)
• data-temp = '.class' (ищет блок по классу)

В data-key нужно указать имя ключа для инициализации на сервере:

• data-key = 'key_in_server' (пояснение в разделе: что является вашим сервером и как отлавливать запросы)

В data-options можно указать дополнительные опции которые отправятся на сервер для обработки:

• data-options = '&item=result&item2=result2' (дополнительные параметры указываются через амперсант - &)

В data-funct можно указать вашу функцию которая к примеру изменит data-options в других или текущем блоке:

• data-show = 'testFunction('item', 'item', 'item')' может возвращать дополнительные параметры (return '&item=result&item2=result2')

В data-show вы указываете каким способом показать блок:

• data-show = 'worning' (покажет скрытый (display:none;) блок, загрузит туда информацию, и скроет его через несколько секунд)
• data-show = 'show' (покажет скрытый (display:none;) блок, загрузит туда информацию)
• data-show = 'show_close' (покажет скрытый (display:none;) блок, загрузит туда информацию)
• data-show = 'insert' (покажет скрытый (display:none;) блок, загрузит туда информацию)

Вы можете создать любой блок в который будет автоматически загружен результат с сервера.

в элемент с атрибутом (start-load='не загружен') будет сразу загружен результат с сервера и атрибут сменится на (start-load='загружен')

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*
<div start-load   ='не загружен' <!-- ЗАГРУЗКА ШАБЛОНА ПРИ ЕГО ПОЯВЛЕНИИ -->
        data-temp    ='.temp1s'  <!-- имя шаблона (указан текущий, поэтому результат загрузится в него) -->
        data-key     ='temp1s'   <!-- ключ для сервера -->
        data-options =''         <!-- дополнительные опции (&options1=item1&options2=item2) -->
        data-funct   =''         <!-- function()|Start|end|both -->
        class ='temp1s'>загрузка при показе страницы</div>
*/    
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Так же вы можете включать получение данных с сервера через равный промежуток времени.

Будьте аккуратны, не создавайте большое количество данных шаблонов, они могут сильно загружать сервер. (оптимальное использование в админ панелях где данный функционал будет доступен ограниченному числу людей)

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*
<div reload-temp 
      data-check   ='вкл'         <!-- переключатель (вкл|выкл) -->
      data-time    ='1000'        <!-- время шага рекурсии -->
      data-temp    ='.temp1s'     <!-- имя шаблона -->
      data-key     ='key_server'  <!-- ключ для сервера -->
      data-options =''            <!-- дополнительные опции (&options1=item1&options2=item2) -->
      data-funct   =''            <!-- function()|Start|end|both -->
      class ='temp1s'>1</div>
*/    
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

ВЫКЛЮЧАЕТ (ПО КЛИКУ) постоянную перезагрузку шаблона с классом

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/    
<a off-reload='имя шаблона'>off</a>
*/    
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

ВКЛЮЧАЕТ (ПО КЛИКУ) постоянную перезагрузку шаблона с классом

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/    
<a on-reload='имя шаблона'>on</a>
*/    
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

ВЫКЛЮЧАЕТ (ПРОГРАММНО) постоянную перезагрузку шаблона с классом

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/    
OffOnReload ('имя шаблона', 'выкл');
*/    
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

ВЫКЛЮЧАЕТ (ПРОГРАММНО) постоянную перезагрузку шаблона с классом

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/    
OffOnReload ('имя шаблона', 'вкл');
*/    
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

ВОЗМОЖНОСТИ ПРИ РАБОТЕ В JAVA_SCRIPT

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

Вы можете в переменной указать имя функции, у которой есть возможность вернуть определенный вами POST параметр.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/    
CORELoadTemp('class_или_id_блока', 'ключ_для_сервера', 'своя_функция', 'доп_POST_параметры');

CORELoadTemp('#dacha', 'key_server', 'function()|Start|end|both', '&options1=item1&options2=item2');
*/    
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Закрывает шаблоны с указанным классом или индификатором.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/    
CORECloseTemp('#temp');
*/    
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Инициализирует закрытие всех ранее открытых блоков (указанные ).

CloseTemp();

Что является вашим сервером и как отлавливать запросы

в head создаете <script> или напрямую в шапке файла js и указываете в переменной путь к PHP файлу (server.php)

window.SERVER_url = '/SERVER/SERVER.php';

Теперь все запросы будут уходить в этот фаил, он и является вашим сервером, где вы определяете логику ответов на все запросы.
На этот файл будут приходить обычные POST данные ($_POST['item'])

Вот пример как получить запрос с ключом data-key='user_giv_garden':

HTML:

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/   
 <a act block
        data-temp     ='.worning'            <!-- имя шаблона | первый символ указывает (.) или (#) -->
        data-key      ='user_giv_garden'    <!-- имя ключа для инициализации на сервере (SERVER) -->
        data-options  =''                   <!-- свои опции: &options1=varable1&options2=varable2 -->
        data-funct    =''                   <!-- своя функция() - function();   function()|Start|end|both -->
        data-show     ='show'               <!-- действие: worning|show|insert|show_close|function -->
        href='#'> Отправить запрос на сервер</a>

<div class='worning'>Сюда будут загружены данные</div>
*/    
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

server.PHP:

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/   
<?php  if (is_set($_POST['user_giv_garden'])) { ?>

         <h1>Данные с сервера загружены</h1>

<?php } ?>
*/    
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

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

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/
<?php  if (is_set($_POST['user_giv_garden'])) { ?>

 <a act block
        data-temp     ='.worning'            <!-- имя шаблона | первый символ указывает (.) или (#) -->
        data-key      ='user_giv_garden'    <!-- имя ключа для инициализации на сервере (SERVER) -->
        data-options  =''                   <!-- свои опции: &options1=varable1&options2=varable2 -->
        data-funct    =''                   <!-- своя функция() - function();   function()|Start|end|both -->
        data-show     ='show'               <!-- действие: worning|show|insert|show_close|function -->
        href='#'> Отправить запрос на сервер</a>

<?php } ?>
*/    
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////