powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Автоматический обработчик html форм на JS
25 сообщений из 353, страница 1 из 15
Автоматический обработчик html форм на JS
    #39338350
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Всем привет!
Чтобы понятно описать мою задачу, придется написать много букв :)

Есть у меня js-функция, которая получает все html-формы на странице (с учетом какого-то критерия), вешает на них сабмит.
Дальше при отправке формы автоматически проверяется заполненность обязательных полей.
И если все нужные поля заполнены, форма отправляется в ajax-файл.
В какой конкретно файл отправлять форму определение происходит тоже автоматически на основе данных формы.
Идейно, все это выглядит так:

html :
Код: html
1.
2.
3.
<form class="ajax" data-module="user" data-handler="register">
    ...
</form>



js :
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
$( 'form.ajax' ).each( function() {
    var f = $( this );
    form.data = new FormData();
    
    f.submit( function( e ) {
        
        // --- Если все обязательные поля заполнены
        if( formCheck() ) {
            var submitParams = {
                'form': f, 
                'module': f.attr( 'data-module' ),
                'handler': f.attr( 'data-handler' )
            };
            formSubmit( submitParams );
        }
        else {}
    } );
} );



Ну и дальше в formSubmit методом $.ajax форма отправляется на сервер в ajax-файл, путь к которому генерится на основе данных из параметров module и handler. И вот в formSubit в success и error мне нужно запустить функцию "постсабмитной" обработки, которая для каждой формы может быть своя.

Код: 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.
function formSubmit( params )
{
    if( !form.error )
    {
        var f = params.form;	
	
        // --- Отправляем форму на сервер		
	$.ajax(
	{				
		'type': 'post',			
		'url': 'module/' + params.module + '/ajax/' + params.handler + '.php', 			
		'data': form.data,			
		'processData': false,			
		'contentType': false,				
		'success':  function( r ) 
		{ 
			// какие-то действия
                        someSuccessFunc();
                        // какие-то действия	

                        // а вместо этого должно быть что-то типа eval( submitParams.success() )						
		},

		'error': function( r ) 
		{ 					 
			// какие-то действия
                        someErrorFunc();
                        // какие-то действия

                        // а вместо этого должно быть что-то типа eval( submitParams.error() )
		}		 
	});
    }		
}



Т.е. по идее, имя этой функции (функциЙ) нужно как-то передать в formSubmit (как вариант, в тех же submitParams) а потом вызвать эту функцию по переданному имени. Но насколько я помню из классического JS, использование eval() считалось небезопасным. Хотя JS сам по себе небезопасный, имхо, т.к. он на стороне клиента. Какие есть еще идеи и варианты решения задачи, чтобы свести угрозы безопасности к минимуму или вообще их обойти?

Заранее благодарю!
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338374
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
urukhay,

угрозы безопасности чего? :))

Не знаю, может Ваш случай не такой, но всё же расскажу как я обычно вешаю обработчики на такие формы:
Код: 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.
<!doctype html>
<html lang="en">

<head>
    <title>test</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
    $(document).on('ready', function(){
        
        $('body').on('submit', 'form.ajax', function(e){
            e.preventDefault();
            var frm = $(this);

            $.ajax({
                url: frm.attr('action'),
                type: frm.attr('method'),
                data: frm.serialize(),
                success: eval(frm.data('success')) || function(data){
                  //дефолтный обработчик, если у формы не определён success метод
                },
                error: eval(frm.data('error')) || function(error){
                  //дефолтный обработчик, если у формы не определён success метод
                  alert('got error');
                }
            });
        });
        
        var errorHandler = function (error){
            alert('got special error');
        };
        
    });
    
    </script>
</head>

<body>
    <form action="/aaa.php" method="post" data-error="errorHandler" class="ajax">
        <input type="text" name="test" value="" />
        <input type="submit" value="Протестировать" />
    </form>
    <form action="/aaa.php" method="post" class="ajax">
        <input type="text" name="test" value="" />
        <input type="submit" value="Протестировать" />
    </form>
</body>
</html>



P.S. Ну ладно... приврал немного. Я никогда так success и error не вешал на формы (только сам ajax так подвешивал, а обработчики успеха/провала обычно в внутри функций перебирал разными switch...case или if..else). Но согласитесь, идея классная в примере ;)
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338382
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Програмёр,
за использование eval - я б голову сворачивал,
1 это медленно, 2 безграмотно.
3 от ajax стоит отказываться , есть прекрасная замена websocket
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338405
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
вадя,
прямо-таки отказываться? Почему?
Всегда его использовал, никаких проблем не было.

Не исключаю, что появилось что-то более современное и эффективное, о чем я не знаю.
Если не сложно, можно тезисно?
А более подробно я уже сам почитаю.
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338409
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Програмёр ,
идея интересная, но у меня почти тоже самое ))
Единственное, я сделал вызов недефолтных обработчиков по другому механизму.
Но объяснить мне это будет сложно, тогда мне придется особенности своего движка тут рассказывать ))

А метод serialise в Вашем случае что делает?
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338410
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Я, конечно, не хаккер, но мне кажется вот сюда:
Код: javascript
1.
eval(frm.data('success'))


можно подсунуть какой-то вредоносный код, при желании

Почитал, советуют делать запуск функций через объект.
Грубо говоря:
Код: javascript
1.
2.
3.
4.
5.
6.
var someObject = {
  'success': successFunc(),
  'error': errorFunf()
}

someObject.successFunc();



По такому принципу я у себя и реализовал, но за информацию спасибо!
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338414
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
вадяПрограмёр,
за использование eval - я б голову сворачивал,
1 это медленно, 2 безграмотно.
3 от ajax стоит отказываться , есть прекрасная замена websocket

1.
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
    $(document).on('ready', function(){
        var handler = function(k){
            var a=2+2;
        };
        var handler2 = function(k){
		console.log('hello');
        };
        var start = new Date();
        for(var i=0; i<1000000; i++){
        	eval('handler2')();
        }
        var middle = new Date();
        for(var i=0; i<1000000; i++){
        	handler2(i);
        }
        var end = new Date();
        
        $('.div1').html(middle.getTime()-start.getTime());
        $('.div2').html(end.getTime()-middle.getTime());
    });


На handler2 теряется 0.6 секунды (выводит 10239 против 9689)
На handler теряется 0.14 секунды (выводит 147 против 8)
Замечаете насколько незначимыми эти затраты являются на сложных функциях (как и на простых... в процентах то +150%, а во времени всего 0.14 секунды). Затраты связаны с разбором кода, его интерпретации в выполняемый и т.д. То есть для 1000 000 итераций "замедление" будет приблизительно одинаковым и будет измеряться в милисекундах, если не толкать туда километровый код.
2. Это предположение такое? Даже комментировать не хочу, пока не услышу аргументацию внятную.
3. Жду аргументов

эммм..... "Пирамида Грэма".... помните? :)) По всем трём пунктам жду беседу, которая будет конструктивной, а не на основе предположений и субъективного видения ;)
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338415
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
urukhay Програмёр ,
идея интересная, но у меня почти тоже самое ))
Единственное, я сделал вызов недефолтных обработчиков по другому механизму.
Но объяснить мне это будет сложно, тогда мне придется особенности своего движка тут рассказывать ))

А метод serialise в Вашем случае что делает?

Форму в строку параметров переводит. Кстати... забыл упомянуть, что мой код файлы не отправляет. Но думаю Ваш тоже не отправляет, потому не страшно... Для файлов надо отдельную ветку кода пилить, или разные ajaxForm подключать
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338418
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
urukhayЯ, конечно, не хаккер, но мне кажется вот сюда:
Код: javascript
1.
eval(frm.data('success'))


можно подсунуть какой-то вредоносный код, при желании

Почитал, советуют делать запуск функций через объект.
Грубо говоря:
Код: javascript
1.
2.
3.
4.
5.
6.
var someObject = {
  'success': successFunc(),
  'error': errorFunf()
}

someObject.successFunc();



По такому принципу я у себя и реализовал, но за информацию спасибо!

Джаваскрипт сам по себе вредоносен ))) Он открыт и выполняется на клиенте. Если в этот джаваскрипт кто-то что-то всунуть умудрится, то никакие защиты кроме обфускации Вас не спасут. Ну а так да... если обфусцируете код js, то метод вызова через объект станет безопаснее, чем напрямую.

P.S. Но разобраться в обфусцированном коде не то же самое, что в него что-то вклинить. Вклинить в разы проще. Например сдвинув код на одну строку ниже и выполнив первой строкой всё, что хочется :) Потому и обфускация - это защита от лентяя, которому сложно пару клавиш нажать. Это не hex кода с точками входа, когда хрен разберёшься что где, откуда начинается, а каждая правка грозит фатальной ошибкой отсутствия операции или её неверным вызовом :))
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338423
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
urukhayвадя,
прямо-таки отказываться? Почему?
Всегда его использовал, никаких проблем не было.

Не исключаю, что появилось что-то более современное и эффективное, о чем я не знаю.
Если не сложно, можно тезисно?
А более подробно я уже сам почитаю.

https://learn.javascript.ru/websockets
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338425
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Програмёр,
ну то, что медленная ты сам посчитал, соглашусь, что в данном случае медленность не критична, но факт :)
-то, что не безопасна, все твердят, но ст воимо доводами соласен, безграмотна-потому как есть другой способ вызвать

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
 try {
                    if (r[1].includes('.')) {
                        var d = r[1].split('.');
                        window[d[0]][d[1]](r[2]);
                    } else {
                        window[r[1]](r[2]);
                    }
                } catch (er) {
                    console.log('ошибка ' + er.stack);
                    console.log('вызов ' + r[1]);
                    console.trace();

                }


это , конечно, не совсем , но принцип показан.
Код: javascript
1.
window[имя_объекта][имя_функции](данные)



время выполнения меряется так
Код: javascript
1.
2.
3.
4.
5.
consjle.time('xx');
...
console.nimeEnd('xxx')
...
console.nimeEnd('xxx')
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338427
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
вадя
Код: javascript
1.
window[имя_объекта][имя_функции](данные)




А теперь то же самое только не засоряя глобальный объект (window)? Вот мой подход не засоряет, всё делая в локальной области видимости. Это и было причиной такого вызова (в первой версии ответа написал через window, но посчитал такой подход плохим и переписал).

Можем обсудить почему не следует засорять глобальную область видимости, но надеюсь Вы со мной согласитесь и нам не придётся эту тему поднимать :))
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338504
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
вадяот ajax стоит отказываться , есть прекрасная замена websocket
это совсем не замена
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338510
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Изопропилвадяот ajax стоит отказываться , есть прекрасная замена websocket
это совсем не замена
П.1 начала флейма выполнен. Вадя произнес 'заявление' ))
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338512
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
авторА теперь то же самое только не засоряя глобальный объект (window)? Вот мой подход не засоряет, всё делая в локальной области видимости. Это и было причиной такого вызова (в первой версии ответа написал через window, но посчитал такой подход плохим и переписал).

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

Изопропил вадяот ajax стоит отказываться , есть прекрасная замена websocket

это совсем не замена

а тут по-точне, пожалуйста.
4 года пользуюсь, вместо ajax, неужели ошибался?
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338517
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Petro123Изопропилпропущено...

это совсем не замена
П.1 начала флейма выполнен. Вадя произнес 'заявление' ))

Нене... мы по пирамиде Грэма общаемся :)) Уже вот 2 вопроса закрыли. Жду закрытия третьего (вадя видимо спать ушёл, а я всё до кровати не доберусь).

Вопрос с websockets четвёртый. Но вадя когда мне писал второй раз его упустил. Думаю ему просто нечего сказать, потому этот вопрос вероятно уже закрыт. Если нет, то в любом случае быстро закроется. У меня аргументация есть
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338518
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
вадя,
Слово овехед для тебя пустой звук. Бесполезно.
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338520
Фотография Petro123
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Програмёр,
Давай).
Закрой его плжалуйста по сокетам.
Удачи!
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338526
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
авторНене... мы по пирамиде Грэма общаемся :)) Уже вот 2 вопроса закрыли. Жду закрытия третьего (вадя видимо спать ушёл, а я всё до кровати не доберусь).
я стараюсь придерживаться
по применению - я вроде ответил, что вопрос спорный, надо по конкретному месту, и по вкусу.
про засор - я согласился, но это не отвергает спорность певоно пункта.
авторВопрос с websockets четвёртый. Но вадя когда мне писал второй раз его упустил. Думаю ему просто нечего сказать, потому этот вопрос вероятно уже закрыт. Если нет, то в любом случае быстро закроется. У меня аргументация есть
вот тут ничего не понял
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338528
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Програмёр,
я так понимаю Petro123 дошёл до основания пирамиды?
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338534
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
вадяПрограмёр,
я так понимаю Petro123 дошёл до основания пирамиды?

Почти. Ссылаясь на личность автора, но не оскорбляя )) Но он в нашей беседе в целом не участвует, потому его простительно... В виде банального вброса :))
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338542
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ПрограмёрУ меня аргументация есть
не поможет ))
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338546
Програмёр
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
вадяавторНене... мы по пирамиде Грэма общаемся :)) Уже вот 2 вопроса закрыли. Жду закрытия третьего (вадя видимо спать ушёл, а я всё до кровати не доберусь).
я стараюсь придерживаться
по применению - я вроде ответил, что вопрос спорный, надо по конкретному месту, и по вкусу.
про засор - я согласился, но это не отвергает спорность певоно пункта.
авторВопрос с websockets четвёртый. Но вадя когда мне писал второй раз его упустил. Думаю ему просто нечего сказать, потому этот вопрос вероятно уже закрыт. Если нет, то в любом случае быстро закроется. У меня аргументация есть
вот тут ничего не понял

Ну значит так, как я понял нашу беседу:
1. Аргумент против - медленно
Ответ на аргумент - скорость незначима. После этого пришли к согласию, что в данном случае это не является минусом

2. Аргумент против - неграмотно (потому как можно иначе)
Ответ на аргумент - нельзя это сделать иначе не засоряя глобальную область видимости

3. Аргумент против - небезопасно (не Ваш, а urukhay)
Ответ на аргумент - учитывая выбранный инструмент вообще незначимо :)

4. Заявление пока без аргументации - вместо ajax можно использовать websocket. Жду аргументацию для чего так делать, если эта тема всё ещё интересна.


То есть пока против eval в указанном контексте аргументов нет (все или крайне незначимы или ошибочны)...
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338565
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
автор2. Аргумент против - неграмотно (потому как можно иначе)
Ответ на аргумент - нельзя это сделать иначе не засоряя глобальную область видимости

я б не стал так котегорично
автор3. Аргумент против - небезопасно (не Ваш, а urukhay)
Ответ на аргумент - учитывая выбранный инструмент вообще незначимо :)
eval вообще не рекомендуют, и я б не рекомендовал, лучше поискать другой вариант. но это моё мнение.

автор4. Заявление пока без аргументации - вместо ajax можно использовать websocket. Жду аргументацию для чего так делать, если эта тема всё ещё интересна.
по этой теме я могу много рассказать, поделиться опытом применения, описать достоинства и недостатки.
поэтому, для конкрктики, если интересно - задавайте вопросы
правда по серверной части в применении к серверу на java.
ссылку на информацию я дал.
...
Рейтинг: 0 / 0
Автоматический обработчик html форм на JS
    #39338573
Фотография Изопропил
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
вадяпо этой теме я могу много рассказать, поделиться опытом применения, описать достоинства и недостатки.
поэтому, для конкрктики, если интересно - задавайте вопросы
правда по серверной части в применении к серверу на java.
ссылку на информацию я дал.

в случае проблемы с соединением по websocket откат на ajax - есть(как в sockjs например)?

тебе вебсокеты нужны чтоб на сервере состояние держать?
...
Рейтинг: 0 / 0
25 сообщений из 353, страница 1 из 15
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Автоматический обработчик html форм на JS
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]