AJAX - как сделать запрос к PHP-коду без перезагрузки страницы

@Vshining · Регистрация: 04.12.2016

Студворк — интернет-сервис помощи студентам

Эта тема имеет больше общего с JavaScript, но ввиду того, как часто у новичков возникают вопросы вроде "Как выполнить функцию PHP из JavaScript-кода?" или "Как отправить форму без перезагрузки?", она напросилась в этом разделе сама самой.

Итак, AJAX - это Asynchronous Javascript And XML - асинхронный JavaScript и XML, если по-русски. Разберём каждое слово:

1) Асинхронный - это и есть то самое, чего все так хотят - выполнение действий без перезагрузки страницы. Пока JavaScript отправил запрос на сервер, пользователь продолжает выполнять действия на странице, т.к. никаких переходов при отправке запроса не происходит.

2) JavaScript - язык программирования, который используют инструменты для отправки AJAX-запросов. Т.к. статья для новичков, то подразумевается, что вы используете либо только чистый JavaScript, либо в совокупности с jQuery. Если вы не используете jQuery, то для создания такого запроса требуется создание объекта XMLHttpRequest. В jQuery всё немного проще и лаконичнее - вы пользуетесь методами $.post и $.get для отправки соответствующих запросов. Когда нужно использовать post, а когда get - чуть позже.

3) XML - в контексте этой статьи это не так важно, считайте это отсылкой к тому самому объекту XMLHttpRequest, ведь сначала появился именно этот способ.

Таким образом, AJAX - это способ отправки запросов (и данных) на сервер без перезагрузки страницы и, как следует, прерывания действий пользователя.

О методах GET и POST.

Обычно, любой запрос сопровождается некоторыми параметрами. В GET-запросах такие параметры передаются в URL, например: http://site.com/index.php?param1=value1&param2=value2. Это накладывает два ограничения:
1) Объём отправляемых данных существенно ограничен - объём классического GET-запроса находится в диапазоне от 2 до 8 килобайт по умолчанию.
2) Данные открыты - не желательно передавать чувствительные данные, например - пароли. Из-за этого, POST-запросы встречаются намного чаще.

У POST-запроса, в отличие от GET, есть тело, которое помещается после заголовка (а GET-запрос имеет только его). Данные тела явно не передаются (относительно - трафик можно прослушать, но это уже вопрос применения шифрования и защищенного канала). Объём информации, который можно передать в теле, опять же, зависит от настроек сервера. По умолчанию, этот объём порядка 20 мегабайт. И, разумеется, можно передавать GET-параметры через URL. В общем случае, POST-запросы являются более гибкими.

Теперь рассмотрим отправку этих двух видов запросов с помощью обозначенных выше методов - с помощью объекта XMLHttpRequest и методов jQuery - $.post и $.get.

GET-запрос

В качестве примера используем следующий "скрипт":

hello.php

PHP
1
2
3
<?php
$name = $_GET['name'];
echo "Hello, $name!";

1) XMLHttpRequest

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            alert(this.responseText);
        } else {
        alert('Произошла ошибка!');
    }
};
 
xmlhttp.open("GET", "hello.php?name=Webkill", true);
xmlhttp.send(null);

В строке один происходит создание объекта. Во второй мы присваиваем этому объекту свойство onreadystatechange - функцию, которая будет выполнена, когда
будет получен ответ на запрос. Такая функция называется callback (колбэк). В ней мы обрабатываем два случая - когда запрос прошел нормально, и когда произошла ошибка.

В 10-той строке мы вызываем метод, в который передаём три параметра:
1) "GET" - тип запроса
2) "hello.php?name=Webkill" - URL запроса: файл hello.php и один параметр name.
3) true - асинхронность. Если false - то браузер будет ожидать ответа (синхронность).

На 11-ой строке происходит отправка запроса, при этом мы указываем один параметр - null (позже, через этот параметр будут передаваться данные тела POST-запроса).

2) jQuery

JavaScript
1
2
3
4
5
$.get("hello.php", {name: "Webkill"},
    function(data) {
        alert(data);
    }
);

Собственно, отправка GET-запроса в jQuery заключается в вызове метода $.get с тремя параметрами:
1) "hello.php" - часть URL без GET-параметров
2) {name: "Webkill"} - параметры запроса в виде ассоциативного массива (JSON)
3) Функция-обработчик, которая вызывается в случае "успеха"

POST-запрос

Допустим, нужно сделать аутентификацию без перезагрузки страницы. GET-запрос не подходит, т.к. передаётся пароль.

login.php

PHP
1
2
3
4
5
6
7
8
9
<?php
$login = 'Webkill';
$pass = 'qwerty123';
 
if($_POST['login'] == $login && $_POST['password'] == $pass) {
    echo 'Добро пожаловать!';
} else {
    echo 'В доступе отказано.';
}

1) XMLHttpRequest

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            alert(this.responseText);
        } else {
            alert('Произошла ошибка!');
        }
};
 
xmlhttp.open("POST", "login.php", true);
xmlhttp.send({login: inputLogin, pass: inputPassword});

Легко заметить, что в целом код не изменился. Поменялся только первый параметр функции open - тип запроса, и теперь мы передаём данные в метод send в формате JSON.

2) jQuery

JavaScript
1
2
3
4
5
$.post('login.php', {login: inputLogin, pass: inputPassword}, 
    function(data) {
        alert(data);
    }
);

Снова, изменений немного: только название метода говорит о том, что в этот раз мы шлём POST-запрос. В случае GET-запроса параметры, которые мы передаём в JSON, закодируются в URL, а в случае POST - попадут в тело запроса. Если вы хотите использовать GET-параметры в POST-запросе, то необходимо их писать в URL вручную.

Естественно, круг задач, для которых используется AJAX намного шире - загрузка файлов, игры и т.д. Целью этой статьи является ознакомление с этим комплексом технологий. Стоит отметить, что в случае jQuery можно обрабатывать намного больше вариантов ответа сервера с помощью функций done, fail и always. Также, функции-обработчики кроме собственно ответа принимают и другие параметры.

Для дальнейшего изучения:
jQuery $.post
jQuery $.get
Русский сайт о XMLHttpRequest

@Зверушь · 20.02.2017, 18:21

Ну элемент отпозиционирован абсолютно. Относительно чего? Если выше нет элементов с позиционированием, то скорее всего от body. То есть элемент следует искать вверху документа.
Далее абсолютно позиционированный элемент сходу не имеет размеров. Задайте их явно при помощи ксс свойств width и height.
Далее, задайте координаты при помощи свойств left и top.
Должно появится

Добавлено через 6 минут
А эта функция поможет поместить ваше окно точно по центру

JavaScript
1
2
3
4
5
6
7
8
9
function centerize($o) {
    $o.css('position', 'fixed');
    
    var left = $(window).width()/2 - $o.outerWidth()/2;
    var top = $(window).height()/2 - $o.outerHeight()/2;
    
    $o.css('left', left+'px');
    $o.css('top', top+'px');
}

Вызвать можно так (единожны, после загрузки документа):

JavaScript
1
2
3
4
centerize($('#result'));
$(window).on('resize', function() {
    centerize($('#result'));
});

@OpXiv · 19.07.2021, 18:45

Эмм. Статья не о чём. Давайте я научу вас, как жить в кайф.

Первым делом, подключаем jquery-3.6.0.min.js

Но одним им, не будешь сыт. Нужно автоматизировать подключения всех <form> на странице.
- Для этого, я написал самый простой скрипт

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
function function__Send(e, th) {
    e.preventDefault();
 
    var url = '';
 
    var callback = th.attr('Success') ? function(data) {
        (new Function('return ' + th.attr('Success'))())(data, th);
    } : function(data) {
        alert(data['message']);
        if (!data['error'])
            th.trigger("reset");
    };
 
    var callbackError = th.attr('Error') ? function(data) {
        (new Function('return ' + th.attr('Error'))())(data, th);
    } : function(error) {
        alert(error.responseText);
    };
 
    if (th.data('href'))
        url = th.data('href');
    else if (th.attr('action'))
        url = th.attr('action');
 
    var type_method = 'POST';
    if (th.attr('method'))
        type_method = th.attr('method');
 
    $.ajax({
        data: new FormData(th[0]),
        crossDomain: true,
        dataType: "json",
        url: url,
        type: type_method,
        processData: false,
        contentType: false,
        success: callback,
        error: callbackError
    })
 
    return false;
}
 
$(window).bind("load", function() {
    $("form").unbind("submit"); // Уберём все обработчики 
    $("form").submit(function(e) { function__Send(e, $(this)); });
});

Всё, готово в JS. Перейдём в HTML реализуем тестовые формы на странице

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
    
<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Админка</title>
  
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script>  
    <script src="send.js"></script>  
 </head>
 <body>
    
    
    <p><font size="5" color="red" face="Arial">Загрузка файла на сервер</font></p>
    <form action="api.php" method="POST" Success="ResultLoad" Error="ResultLoadError">
        <input type="hidden" name="method_call" value="LoadFile"/>
        
        <p>Выберите файл</p>
        <input name="myFile[]" type="file" multiple>
 
        
        <textarea id="Mytextarea">
          Данные файла
        </textarea>
 
        <br>
        <button type="submit" class="button default">
            Отправить
        </button>
    </form>
    
    <script>
        function ResultLoad(data, this_jquery) {
            // Сбросим данные формы
            this_jquery.trigger("reset");
            
            // Выведем ответ
            $('#Mytextarea').val(data['message']);
        }
        function ResultLoadError(error, this_jquery) {
            alert(error.responseText);
        }
    </script>
    
 
    <p><font size="5" color="red" face="Arial">Отправляем в API баланс, и API его возвращает</font></p>
    <form action="api.php" method="POST">
        <input type="hidden" name="method_call" value="GetBalance"/>
        
        <p>Введите баланс</p>
        <input name="Balance" type="text"/>
        
        <button type="submit" class="button default">
            Отправить
        </button>   
    </form>
    
    
    <p><font size="5" color="red" face="Arial">Калькулятор</font></p>
    <form action="api.php" method="POST">
        <input type="hidden" name="method_call" value="GetCalc"/>
        
        <p>(A+B)*C</p>
        <input name="A" type="text"/>
        <input name="B" type="text"/>
        <p>Необязательный параметр</p>
        <input name="C" type="text"/>
        
        <button type="submit" class="button default">
            Отправить
        </button>   
    </form>
    
    
    
    <p><font size="5" color="red" face="Arial">Тестовая форма</font></p>
    <form action="api.php" method="POST" >
        <input type="hidden" name="method_call" value="TestForm"/>
    
        <p>Ваше имя</p>
        <input name="name" type="text"/>
        <p>Ваша Фамилия</p>
        <input name="surname" type="text"/>
        
        <p>Ваш номер</p>
        <input name="phone" type="text"/>
            
    
    
      <button type="submit" class="button default">
        Отправить
      </button> 
    </form>
    
 </body>
</html>

Как видим, тут список довольно обширен. Мы сразу можем передавать файлы, получать значения от PHP коллбэка. И так далее.

Теперь, приступим к PHP

Кликните здесь для просмотра всего текста

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<?php
 
// Стандартный функционал 
// > Покажем все ошибки
 
ini_set('error_reporting', E_ALL);
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
 
// > Задаём ответ в виде json
header('Content-Type: application/json; charset=utf-8');
 
include_once "api_functions.php";
 
// Код 
switch(ParsArgsResult('method_call', 'Метод не найден.')) {
    case 'GetBalance':
        extract(ParsArgsArray(
            ['Balance', 'Поле баланса не заполнено.']
        ));
        
        returnOut([
            'error' => false,
            'message' => 'Ваш баланс: ' . $Balance
        ]);
    break;
    case 'GetCalc':
        extract(ParsArgsArray(
            ['A', 'Поле A не заполнено.'],
            ['B', 'Поле B не заполнено.'],
            // Применяем default значение
            ['C', false, true, 1]
        ));
        
        $calc = ($A + $B) * $C;
 
        returnOut([
            'error' => false,
            'message' => 'Результат: ' . $calc
        ]);
    break;
    case 'TestForm':
        extract(ParsArgsArray(
            function(array $error) { // Кастомный обраброчик
                $PrintError = print_r($error, true);
                returnOut([
                    'error' => false,
                    'message' => $PrintError
                ]);
            },
            ['name', 'Имя не заполнено.'],
            ['surname', 'Фамилия не заполнена.'],
            ['phone', 'Телефон не заполнен.']
        ));
        
        $message = "Здраствуйте: {$name}!\nВаша фамилия: {$surname}!\nВаш номер: {$phone}!";
        returnOut([
            'error' => false,
            'message' => $message,
        ]);
    break;
    case 'LoadFile':
        // Указываем путь загрузки
        if(LoadFilesFromDir('Loader', $SuccessfulLoading, $IsErrorLoad)) {
            returnOut([
                'error' => true,
                'message' => 'Не удалось создать директорию загрузки файла...'
            ]);
        }
        
        // Сформируем ответ
        $message = '';
        
        // По умолчанию, не будет формировать вывод успешных
        if(count($SuccessfulLoading) > 0) {
            $message .= 'Удачно загрузись: ' . count($SuccessfulLoading) . PHP_EOL;
            $message .= '-----------------------------'. PHP_EOL;
            $message .= print_r($SuccessfulLoading, true);
            $message .= '-----------------------------'. PHP_EOL;
        }
        
        // По умолчанию, не будет формировать вывод ошибок
        if(count($IsErrorLoad) > 0) {
            $message .= 'Ошибка загрузки: ' . count($IsErrorLoad) . PHP_EOL;
            $message .= '-----------------------------'. PHP_EOL;
            $message .= print_r($IsErrorLoad, true);
            $message .= '-----------------------------'. PHP_EOL;
        }
        
        $message .= PHP_EOL;
        
    
        // По умолчанию, не будет формировать вывод успешных
        if(count($SuccessfulLoading) > 0) {
            $message .= '-----------------------------'. PHP_EOL;
            $message .= 'Содержимое файлов: ' . PHP_EOL;
            $message .= '-----------------------------'. PHP_EOL;
            
            // Прочитаем содержимое загруженных файлов
            // И отдадим пользователю в ответе
            foreach($SuccessfulLoading as $file) {
                $message .= '-----------------------------'. PHP_EOL;
                $message .= '-> ' . $file['path'] . PHP_EOL;
                $message .= '-----------------------------'. PHP_EOL;
                $message .= file_get_contents($file['path']) . PHP_EOL;
                $message .= '-----------------------------'. PHP_EOL;   
                $message .= PHP_EOL;
                
                // Удалим загруженный файл от греха по дальше
                unlink($file['path']);
            }
        }
        
        
        returnOut([
            'error' => false,
            'message' => print_r($message, true),
        ]); 
    break;
    default:
        returnOut([
            'error' => true,
            'message' => 'Метод не найден.'
        ]);
};

Да, понимаю. Вы сейчас ударили себя по лицу, и сказали - а что??? Так можно было???! И начали тихо плакать.

Я скажу, можно!

PHP
1
2
3
4
5
6
        extract(ParsArgsArray(
            ['A', 'Поле A не заполнено.'],
            ['B', 'Поле B не заполнено.'],
            // Применяем default значение
            ['C', false, true, 1]
        ));

И даже не зазорно, применяя кольэк обработки вывода

PHP
1
2
3
4
5
6
7
8
9
10
11
12
        extract(ParsArgsArray(
            function(array $error) { // Кастомный обраброчик
                $PrintError = print_r($error, true);
                returnOut([
                    'error' => false,
                    'message' => $PrintError
                ]);
            },
            ['name', 'Имя не заполнено.'],
            ['surname', 'Фамилия не заполнена.'],
            ['phone', 'Телефон не заполнен.']
        ));

Самое главное, подключить файл api_functions.php

Кликните здесь для просмотра всего текста

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<?
// > Стандартная функция вывода ответа API
function returnOut(array $result) {
    echo json_encode($result); 
    exit; // Выходим из работы скрипта.
};
 
function PrintHtml(...$Args) {
    echo '<pre>' . print_r($Args, true) . '</pre>';
}
 
function SendMessageTelegram($Message, $token, $chat_id) {
    $ch = curl_init('https://api.telegram.org/bot' . $token . '/sendMessage');
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HEADER, false);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, 'chat_id=' . $chat_id . '&text=' . urlencode($Message));
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
    
    $result = json_decode(curl_exec($ch), true);
    
    curl_close($ch);
    
    if(is_array($result) && (isset($result['error_code']) && ($result['error_code'] == 400))) {
      return SendMessageTelegram($Message, $token, $result['parameters']['migrate_to_chat_id']);
    }
    
    return $result;
}
 
// Функция загрузки файлов на сервер
function LoadFilesFromDir($dirLoad, &$SuccessfulLoading, &$IsErrorLoad, $ext = '') {
    if(!empty($ext))
        $ext = explode('|', $ext);
    // Если папки не существует, создадим её
    if(!is_dir($dirLoad)) {
        if (!mkdir($dirLoad, 0777, true)) {
            return true;
        }
    }
        
    // Обработаем переданные файлы на сервер
    $SuccessfulLoading = [];
    $IsErrorLoad = [];
    
    $callbackLoad = function($key, $name, $tmp_name, $type) 
                        use ($dirLoad, &$SuccessfulLoading, &$IsErrorLoad, $ext) {
        $Load = false;  
        if(is_array($ext)) {
            foreach($ext as $v) {
                if(stripos($type, $v) !== false) {
                    $Load = true;   
                    break;
                }
            }
        } else {
            $Load = true;       
        }
        
        if($Load) {
            // Зададим указанный путь, с именем файла
            $LoadToDir = $dirLoad . '/' . $name;
            
            // Перенесём файл в нашу указанную папку
            $ret = ['tmp_name' => $tmp_name, 'path' => $LoadToDir,  'type' => $type];
            if(!move_uploaded_file($tmp_name, $LoadToDir))
                $IsErrorLoad[$key] = $ret;
            else
                $SuccessfulLoading[$key] = $ret;
        }
    };
    
    foreach($_FILES as $key => $file) {
        if(is_array($file['name'])) {
            // Похоже, нужно обработать сколько файлов (multiple)
            foreach($file['name'] as $index => $name) {
                $callbackLoad($key, $name, $file['tmp_name'][$index], $file['type'][$index]);
            }
        } else {
            // Обаработаем без multiple
            $callbackLoad($key, $file['name'], $file['tmp_name'], $file['type']);
        }
    }
    
 
    return count($SuccessfulLoading) <= 0 && count($IsErrorLoad) <= 0;
}
 
 
// Функция быстрой проверки аргументов
// $name      > Имя ключа в $_REQUEST
// $ErrorText > Еси нужен кастомтный текст ошибки
// $default   > Нужен ли аргумент по умолчанию? Если нет ключа
// $value     > Если нужен, то задаём значение
// $callBack($name, $ErrorText) > Кастомный обработчик
function ParsArgsResult($name, $ErrorText = false, $default = false, $value = false, $callBack = false) {
    $Result = NULL;
    if(empty($_REQUEST[$name])) { // Если пустой ключ, или его нет
        if($default) {
            $Result = $value; // Задаём значение по умолчанию
        } else {
            $ErrorText = ($ErrorText ? $ErrorText : "Ключ \"{$name}\" не задан.");
            if($callBack && is_callable($callBack)) {
                $callBackResult = $callBack($name, $ErrorText);
                if($callBackResult) {
                    return $callBackResult;
                }
            } else {
                returnOut([
                    'error' => true,
                    'message' => $ErrorText
                ]);
            }
        }
    } else { // Получим значение ключа
        $Result = $_REQUEST[$name];
    }
    return $Result;
}
 
// Обрабатываем поочерёдно [], [], ...
function ParsArgsArray() {
    $Result = [];
    $callBack = null;
    $Error = [];
    foreach(func_get_args() as $params) {
        if(is_callable($params)) {
            $callBack = $params;
        } elseif(is_array($params)) {
            $name = $params[0];
            $ErrorText = isset($params[1]) ? $params[1] : false;
            $default = isset($params[2]) ? $params[2] : false;
            $value = isset($params[3]) ? $params[3] : false;
            
    
            if(empty($_REQUEST[$name])) { // Если пустой ключ, или его нет
                if($default) {
                    $Result[$name] = $value; // Задаём значение по умолчанию
                } else {
                    $Error[$name] = $ErrorText ? $ErrorText : "Ключ \"{$name}\" не задан.";
                }
            } else { // Получим значение ключа
                $Result[$name] = $_REQUEST[$name];
            }
        }
    }
    if(!empty($Error)) {
        if(is_callable($callBack)) {
            $callBackResult = $callBack($Error);
            if($callBackResult) {
                return $callBackResult;
            }
        } else {
            $errorText = '';
            foreach($Error as $key => $value) {
                $errorText .= $value . PHP_EOL;
            }
            returnOut([
                'error' => true,
                'message' => $errorText
            ]);
        }
    }
    
    return $Result;
}

Готово! Вы используете универсальный API который даёт вам не париться.

Но вы скажите, я всё равно парюсь, не хочу париться над выводом в нужный id!.

Вот, держите. Она автоматически расставит key в нужные id если таковы есть

JavaScript
1
2
3
4
5
         function ResultLoad(data, this_jquery) {
            Object.keys(data).forEach(function(key){
                this_jquery.children('#'+key).html(data[key]);
        });
         }

@OpXiv · 08.09.2021, 21:01

FIX моего недостроя по блегчённому API для сайтов

Кликните здесь для просмотра всего текста

api_functions.php

- Убрана $_request в пользу REQUEST_METHOD для получения из $_POST и $_GET исключая $_COOKIE
- Переименован последний параметр для LoadFilesFromDir и добавлен собственный разделитель

Кликните здесь для просмотра всего текста

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<?
// > Стандартная функция вывода ответа API
function returnOut(array $result) {
    echo json_encode($result); 
    exit; // Выходим из работы скрипта.
};
 
function PrintHtml(...$Args) {
    echo '<pre>' . print_r($Args, true) . '</pre>';
}
 
function SendMessageTelegram($Message, $token, $chat_id) {
    $ch = curl_init('https://api.telegram.org/bot' . $token . '/sendMessage');
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HEADER, false);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, 'chat_id=' . $chat_id . '&text=' . urlencode($Message));
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
    
    $result = json_decode(curl_exec($ch), true);
    
    curl_close($ch);
    
    if(is_array($result) && (isset($result['error_code']) && ($result['error_code'] == 400))) {
      return SendMessageTelegram($Message, $token, $result['parameters']['migrate_to_chat_id']);
    }
    
    return $result;
}
 
// Функция загрузки файлов на сервер
function LoadFilesFromDir($dirLoad, &$SuccessfulLoading, &$IsErrorLoad, $mimeTypes = '', $splitMimeTypes = '|') {
    if(!empty($mimeTypes))
    $mimeTypes = explode($splitMimeTypes, $mimeTypes);
    // Если папки не существует, создадим её
    if(!is_dir($dirLoad)) {
        if (!mkdir($dirLoad, 0777, true)) {
            return true;
        }
    }
        
    // Обработаем переданные файлы на сервер
    $SuccessfulLoading = [];
    $IsErrorLoad = [];
    
    $callbackLoad = function($key, $name, $tmp_name, $type) 
                        use ($dirLoad, &$SuccessfulLoading, &$IsErrorLoad, $mimeTypes) {
        $Load = false;  
        if(is_array($mimeTypes)) {
            foreach($mimeTypes as $v) {
                if(stripos($type, $v) !== false) {
                    $Load = true;   
                    break;
                }
            }
        } else {
            $Load = true;       
        }
        
        if($Load) {
            // Зададим указанный путь, с именем файла
            $LoadToDir = $dirLoad . '/' . $name;
            
            // Перенесём файл в нашу указанную папку
            $ret = ['tmp_name' => $tmp_name, 'path' => $LoadToDir,  'type' => $type];
            if(!move_uploaded_file($tmp_name, $LoadToDir))
                $IsErrorLoad[$key] = $ret;
            else
                $SuccessfulLoading[$key] = $ret;
        }
    };
    
    foreach($_FILES as $key => $file) {
        if(is_array($file['name'])) {
            // Похоже, нужно обработать сколько файлов (multiple)
            foreach($file['name'] as $index => $name) {
                $callbackLoad($key, $name, $file['tmp_name'][$index], $file['type'][$index]);
            }
        } else {
            // Обаработаем без multiple
            $callbackLoad($key, $file['name'], $file['tmp_name'], $file['type']);
        }
    }
    
 
    return count($SuccessfulLoading) <= 0 && count($IsErrorLoad) <= 0;
}
 
 
// Функция быстрой проверки аргументов
// $name      > Имя ключа в $_GET\$_POST
// $ErrorText > Еси нужен кастомтный текст ошибки
// $default   > Нужен ли аргумент по умолчанию? Если нет ключа
// $value     > Если нужен, то задаём значение
// $callBack($name, $ErrorText) > Кастомный обработчик
function ParsArgsResult($name, $ErrorText = false, $default = false, $value = false, $callBack = false) {
    $Result = NULL;
    $currentArgs = $_SERVER['REQUEST_METHOD'] == 'GET' ? $_GET : $_POST;
 
    if(empty($currentArgs[$name])) { // Если пустой ключ, или его нет
        if($default) {
            $Result = $value; // Задаём значение по умолчанию
        } else {
            $ErrorText = ($ErrorText ? $ErrorText : "Ключ \"{$name}\" не задан.");
            if($callBack && is_callable($callBack)) {
                $callBackResult = $callBack($name, $ErrorText);
                if($callBackResult) {
                    return $callBackResult;
                }
            } else {
                returnOut([
                    'error' => true,
                    'message' => $ErrorText
                ]);
            }
        }
    } else { // Получим значение ключа
        $Result = $currentArgs[$name];
    }
    return $Result;
}
 
// Обрабатываем поочерёдно [], [], ...
function ParsArgsArray() {
    $currentArgs = $_SERVER['REQUEST_METHOD'] == 'GET' ? $_GET : $_POST;
 
    $Result = [];
    $callBack = null;
    $Error = [];
    foreach(func_get_args() as $params) {
        if(is_callable($params)) {
            $callBack = $params;
        } elseif(is_array($params)) {
            $name = $params[0];
            $ErrorText = isset($params[1]) ? $params[1] : false;
            $default = isset($params[2]) ? $params[2] : false;
            $value = isset($params[3]) ? $params[3] : false;
            
    
            if(empty($currentArgs[$name])) { // Если пустой ключ, или его нет
                if($default) {
                    $Result[$name] = $value; // Задаём значение по умолчанию
                } else {
                    $Error[$name] = $ErrorText ? $ErrorText : "Ключ \"{$name}\" не задан.";
                }
            } else { // Получим значение ключа
                $Result[$name] = $currentArgs[$name];
            }
        }
    }
    if(!empty($Error)) {
        if(is_callable($callBack)) {
            $callBackResult = $callBack($Error);
            if($callBackResult) {
                return $callBackResult;
            }
        } else {
            $errorText = '';
            foreach($Error as $key => $value) {
                $errorText .= $value . PHP_EOL;
            }
            returnOut([
                'error' => true,
                'message' => $errorText
            ]);
        }
    }
    
    return $Result;
}

send.js
- Работает GET запрос у <form method="GET">
- Добавлен параметр атрибут PreСall, который срабатывает перед вызовом.
> Данный аттрибут полезен для проверки данных перед отправкой, или записи в form каких то данных из внешних данных, в невидимые поля hidden input

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
function function__Send(e, th) {
    e.preventDefault();
 
    if (th.attr('PreСall') && (new Function('return ' + th.attr('PreСall'))())(data, th)) {
        return false;
    }
    
    var type_method = 'POST';
    if (th.attr('method'))
        type_method = th.attr('method');
    
    $.ajax({
        data: type_method == 'GET' ? $(th).serialize() : new FormData(th[0]),
        crossDomain: true,
        dataType: "json",
        url: (th.data('href') ? th.data('href') : (th.attr('action') ? th.attr('action') : '/')),
        type: type_method,
        processData: false,
        contentType: false,
        success: th.attr('Success') ? function(data) {
            (new Function('return ' + th.attr('Success'))())(data, th);
        } : function(data) {
            alert(data['message']);
            if (!data['error'])
                th.trigger("reset");
        },
        error: th.attr('Error') ? function(data) {
            (new Function('return ' + th.attr('Error'))())(data, th);
        } : function(error) {
            alert(error.responseText);
        }
    })
 
    return false;
}
 
$(window).bind("load", function() {
    $("form").unbind("submit"); // Уберём все обработчики 
    $("form").submit(function(e) { function__Send(e, $(this)); });
});

Пример PreСall

JavaScript
1
2
3
4
5
6
7
8
9
10
        function PreСallFunc(data, this_jquery) {
            // получим данные с корзины 
            let cart = GetJsonlocalStorage(cartKeySaveJson);
            // Поместим в форму перед отпрвкой
            this_jquery.children('[name=products]').val(
                JSON.stringify(cart)
            );
            // Если продукты есть, сделать отпрвку
            return  Object.keys(cart).length <= 0
         }

HTML5
1
2
3
4
5
6
7
8
9
<form autocomplete="off" action="api.php" method="POST" PreСall="PreСallFunc">
 <input type="hidden" name="method_call" value="methodMy"/>
 <input type="hidden" name="products" value=""/>
 
             
  <div id="contentCart">
 
  </div>
</form>

@xkkx · 08.02.2023, 01:53

Сообщение от OpXiv

FIX моего недостроя по блегчённому API для сайтов

Классно, очень сильно помогает плодить формы, но хотелось бы внести коррективы для лучшего удобства

Кликните здесь для просмотра всего текста

Файл script.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
function formSubmitCallBack(urlSend) {
    return function(e) {
        e.preventDefault();
 
        let formCurrent = this;
        let th = jQuery(formCurrent);
 
        let ArgsCall = new FormData(formCurrent);
 
        let dataApiMethodParams = th.attr('data-api-method-params');
        if (dataApiMethodParams != undefined) {
            if (dataApiMethodParams = dataApiMethodParams.trim()) {
                buildFormData(ArgsCall, JSON.parse(dataApiMethodParams));
            }
        }
 
        if (!ArgsCall.has('method_call'))
            ArgsCall.append('method_call', th.attr('data-api-method'));
 
        if (th.triggerHandler('onPreCall', [ArgsCall]) === false) return false;
 
        if (th.triggerHandler('onPreCallValidation', [ArgsCall]) === false) return false;
 
        urlSend = (th.data('href') ? th.data('href') : (th.attr('action') ? th.attr('action') : urlSend));
 
        let fetch_opt = {
            method: th.attr('method') ? th.attr('method').toUpperCase() : 'POST'
        };
 
        let errorMessage = '';
        if (fetch_opt.method == 'GET') {
            errorMessage = 'GET ' + urlSend;
            urlSend += '?' + (new URLSearchParams(ArgsCall).toString());
        } else {
            errorMessage = 'POST ' + urlSend;
            fetch_opt.body = ArgsCall;
        }
 
        let responseData = false;
        fetch(urlSend, fetch_opt).then(function(response) {
            responseData = response.clone();
            let jsonData = false;
            if (response.ok) {
                const contentType = response.headers.get('content-type');
                if (contentType || contentType.includes('application/json')) {
                    jsonData = response.json();
                }
            }
 
            if (typeof jsonData === 'object') {
                return jsonData;
            }
        }).then(function(data) {
            if (th.triggerHandler('onResultDebug', [data, ArgsCall]) === false) return false;
            if (th.triggerHandler('onResult', [data, ArgsCall]) === false) return false;
 
            if (data['error']) {
                if (th.triggerHandler('onError', [data, ArgsCall]) === false) return false;
            } else if (th.triggerHandler('onSuccess', [data, ArgsCall]) === false) return false;
 
            if (data['reload_api_form']) {
                let reload_api_form = MethodAPI(data['reload_api_form']);
                if (reload_api_form.length)
                    reload_api_form.submit();
            }
 
            if (data['reload']) {
                window.setTimeout(function() {
                    location.reload();
                }, (data['reloadTime'] !== undefined) ? data['reloadTime'] : 1000);
            }
        }).catch(function(error) {
            if (responseData === undefined) {
                errorMessage += "\n" + error;
            } else {
                errorMessage += "\n" + 'status ' + responseData.status + ' (' + responseData.statusText.trim() + ')';
                responseData.text().then(function(Message) {
                    errorMessage += "\n" + Message;
                });
            }
 
            if (th.triggerHandler('onCatchDebug', [errorMessage, ArgsCall]) === false) return false;
            if (th.triggerHandler('onCatch', [errorMessage, ArgsCall]) === false) return false;
        });
        return false;
    }
}
 
function buildFormData(formData, data, parentKey) {
    if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File)) {
        Object.keys(data).forEach(function(key) {
            buildFormData(formData, data[key], parentKey ? `${parentKey}[${key}]` : key);
        });
    } else {
        formData.append(parentKey, data == null ? '' : data);
    }
}
 
function MethodAPI(method) {
    return jQuery('form[data-api-method="' + method + '"]');
}
 
function MethodsAPI() {
    return jQuery('form[data-api-method]');
}
 
 
const dataApiUrlCall = document.currentScript.getAttribute('data-api-url');
 
function wrapperSubmitElement(el) {
    el.unbind("submit").submit(formSubmitCallBack(dataApiUrlCall));
    el.each(function(index) {
        if (jQuery(this).attr('data-api-method-autoLoad') == 'true') {
            jQuery(this).submit();
        }
    });
}
 
 
function CallMethodAPI(id, ElementCallID, params, elementClick) {
    let MethodCall = MethodAPI(id);
 
    if (MethodCall.length <= 0) {
        MethodCall = jQuery(document.createElement("form"));
        MethodCall.attr("data-api-method", id);
        MethodCall.attr("data-api-toast-caption", 'Статус выполнения');
        wrapperSubmitElement(MethodCall);
    }
 
    MethodCall.attr('ElementCallID', ElementCallID ? ElementCallID : 0);
 
    if (elementClick) {
        jQuery(elementClick).prop('disabled', true);
    }
 
    if (params != undefined && params.trim())
        MethodCall.attr("data-api-method-params", params);
 
    MethodCall.on("onResultDebug", function(event, params) {
        if (elementClick) {
            jQuery(elementClick).prop('disabled', false);
        }
        jQuery(event.target).off("onResultDebug")
        jQuery(document).trigger("onResult_MethodCall", [params]);
    }).on("onCatchDebug", function(event, message, ArgsCall) {
        if (elementClick) {
            jQuery(elementClick).prop('disabled', false);
        }
        jQuery(document).trigger("onCatchDebug_MethodCall", [message, ArgsCall]);
    }).submit();
}
 
(function() {
    jQuery(document).on('click', '[data-call-method-api]:not([data-call-method-api=""])', function() {
        CallMethodAPI(jQuery(this).attr('data-call-method-api'), jQuery(this).attr('data-call-method-api-id'), jQuery(this).attr('data-call-method-api-params'), this);
    });
 
    wrapperSubmitElement(MethodsAPI());
})();

Файл api.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<?
 
define('method_call', filter_input_post_or_get('method_call', FILTER_UNSAFE_RAW));
define('ElementCallID', max(0, (int)filter_input_post_or_get('ElementCallID', FILTER_SANITIZE_NUMBER_INT)));
 
function filter_input_post_or_get($var_name, $filter = FILTER_UNSAFE_RAW, $options = 0, $defaultValue = null)
{
    if(filter_has_var(INPUT_POST, $var_name) === true) {
        $result = filter_input(INPUT_POST, $var_name, $filter, $options);
    } elseif(filter_has_var(INPUT_GET, $var_name) === true) {
        $result = filter_input(INPUT_GET, $var_name, $filter, $options);
    } elseif($defaultValue) {
        return $defaultValue;
    } else {
        return false;
    }
 
    if (($result === NULL || $result === FALSE) && ($defaultValue !== NULL)) {
        return $defaultValue;
    }
    return $result;
}
 
function filter_input_array_post_or_get($options = FILTER_UNSAFE_RAW, $add_empty = true)
{
    return filter_input_array(
        $_SERVER['REQUEST_METHOD'] === 'POST' ? INPUT_POST : INPUT_GET,
        $options,
        $add_empty
    );
}
 
function returnOut(array $result = [], $isError = false, $message = false, $toast_caption = false, $toast_off = false, $reload = false, $reloadTime = 1000)
{ 
    if (!isset($result['error']))
        $result['error'] = $isError;
 
    if (!isset($result['message']))
        $result['message'] = $message;
 
    if (!isset($result['reload']))
        $result['reload'] = $reload;
 
    if ($result['reload'] && !isset($result['reloadTime'])) {
        $result['reloadTime'] = $reloadTime;
    }
 
    if (defined('method_call') && method_call)
        $result['method_call'] = method_call;
 
    if (defined('ElementCallID') && ElementCallID)
        $result['ElementCallID'] = ElementCallID;
 
 
    echo json_encode($result);
    exit;
};
 
function returnOutError()
{
    returnOut([], true, print_r(func_num_args() == 1 ? current(func_get_args()) : func_get_args(), true));
}
 
function returnOutSession()
{
    returnOut([], false, print_r(func_num_args() == 1 ? current(func_get_args()) : func_get_args(), true));
}
 
function returnOutSessionReload()
{
    returnOut([], false, print_r(func_num_args() == 1 ? current(func_get_args()) : func_get_args(), true), false, false, true);
}
 
function PrintHtml(...$Args)
{
    echo '<pre>' . print_r($Args, true) . '</pre>';
}
function PrintHtmlExit(...$Args)
{
    echo '<pre>' . print_r($Args, true) . '</pre>';
    exit;
}

Форма

PHP
1
2
3
4
5
6
7
8
9
10
11
<form data-api-method="login">
  <div class="mb-3">
    <input class="form-control" type="text" placeholder="Логин" name="login" autocomplete="off" required />
  </div>
  <div class="mb-3">
    <input class="form-control" type="password" placeholder="Пароль" name="password" autocomplete="off" required />
  </div>
  <div class="mb-3">
    <button class="btn btn-primary d-block w-100 mt-3" type="submit" name="submit">Войти</button>
  </div>
</form>

Скрипты обработки формы login.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
MethodAPI('login').on('onPreCall', (event, ArgsCall) => { // Перед вызовом
    // Добавляем параметры для вызова 
    ArgsCall.append('params[]', 1);
    ArgsCall.append('params[]', 2);
}).on('onResult', (event, params) => { // onSuccess / onError
     console.log(params);
     let isError = params['error'] ? 'Ошибка: ' : 'Успех: ';
     alert(isError  + params['message']);
}).on('onError', (event, params) => { // Если скрипт вернул ошибку в ответе error 
     console.log(params);
     alert('Ошибка: ' + params['message']);
}).on('onSuccess', (event, params) => { // Если скрипт НЕ вернул ошибку в ответе error 
     console.log(params);
     alert('Успех: ' + params['message']);
}).on('onCatch', (event, errorMessage, ArgsCall) => { // К примеру отвалился интернет 
     console.log(errorMessage);
});

Файл handler.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?
require_once "api.php";
 
if(!defined('method_call')) {
    return;
}
 
switch(method_call) {
    case 'login':
        $connect = connectCRM();
 
        $login = filter_input_post_or_get('login');
        $password = filter_input_post_or_get('password');
 
 
        $password = md5($connect->escape($password));
 
 
        $Login = $connect->SELECT('User', ['login' => $login, '|email' => $login]);
 
        if($Login->row && $Login->row['password'] == md5($password)) {
            $randomString = $Login->row['hash'] 
                . ($login . ((rand(100, 5000) . microtime(true) . rand(100, 5000)) . uniqid()));
            $authkey = hash('sha256', $randomString);
 
            $connect->UPDATE('User', [
                'authkey' => $authkey
            ], ['id' => $Login->row['id']]);
        
            setcookie('AuthUserSite', $authkey, time() + 3600 * 24 * 30, "/");
  
            returnOutSessionReload('Вы успешно вошли!');
        } else {
            returnOutError( 'Логин или пароль - неверный.' );
        }
    break;
    default:
        returnOutError('Метод не определён');
}

Подключение

HTML5
1
2
<script src="/script.js" data-api-url="handler.php"> </script>
<script src="/login.js"> </script>

А так же изюминка

HTML5
1
<button data-call-method-api="ИмяМетода" data-call-method-api-params="{'name': 'DOG'}"> <button>

Обрабатывается через события на document

JavaScript
1
2
3
4
5
6
7
8
9
jQuery(document).on("onResult_MethodCall", (event, params) => {
    switch (params['method_call']) {
        case 'ИмяМетода':
            console.log(params);
            break;
    }
}).on("onCatchDebug", (event, errorMessage, ArgsCall) => {
    
});

@xkkx · 09.02.2023, 21:11

Сообщение от xkkx

Классно, очень сильно помогает плодить формы, но хотелось бы внести коррективы для лучшего удобства

Пример

@xkkx · 14.02.2023, 23:26

Пример рандомной смены картинок раз в 5 секунд

Форма

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
<form data-api-method="randomImg" data-api-method-autoLoad="true">
        <div class="background"><img src="" /></div>
        
        <header>
          <hgroup>
            <h1>Передовые возможности</h1>
            <h2>Прям сейчас, прям тут</h2>
          </hgroup>
        </header>
        <footer>Каждые 5 секунд. Текущий файл: <p class="filename"> <p></footer>
    </form>

JS скрипт

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
let randomImg = MethodAPI('randomImg');
randomImg.on('onResult', (event, params) => { // onSuccess / onError
    if(params['imgFile']) {
        randomImg.find('img').attr('src', params['imgFile']);
        randomImg.find('.filename').html(params['imgFileName']);
        
        setTimeout(function() {
            randomImg.submit();
        }, 5000);
    }
})

PHP скрипт

Кликните здесь для просмотра всего текста

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
require_once "api.php";
 
if(!defined('method_call')) {
    return;
}
 
function randomFilePath($path) {
    $fi = new FilesystemIterator($path, FilesystemIterator::SKIP_DOTS);
    $fi->seek(mt_rand(0, iterator_count($fi) - 1));
    return  $fi->current()->getPathname();
}
 
 
switch(method_call) {
    case 'randomImg':
        $randomFile = randomFilePath('img');
        
        returnOutSession('Файл получен!', [
            'imgFile' => $randomFile,
            'imgFileName' => basename($randomFile)
        ]);
    break;
    default:
        returnOutError('Метод не определён');
}

По вопросу
Смена картинки через 5 секунд

@xkkx · 14.02.2023, 23:30

Не закрепилось

@VladRost · 24.01.2024, 17:16

Интересная тема, спасибо.
Минус только в том, что не очень подробно.
То есть написано не на уровне начинающего, а выше.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@VladRost 6 / 5 / 2 Регистрация: 08.09.2015 Сообщений: 95
	24.01.2024, 17:16
	Интересная тема, спасибо. Минус только в том, что не очень подробно. То есть написано не на уровне начинающего, а выше. 0