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

Есть у меня 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
01.11.2016, 00:33
    #39338374
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Автоматический обработчик html форм на JS
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
01.11.2016, 00:42
    #39338382
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Автоматический обработчик html форм на JS
Програмёр,
за использование eval - я б голову сворачивал,
1 это медленно, 2 безграмотно.
3 от ajax стоит отказываться , есть прекрасная замена websocket
...
Рейтинг: 0 / 0
01.11.2016, 03:22
    #39338405
urukhay
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Автоматический обработчик html форм на JS
вадя,
прямо-таки отказываться? Почему?
Всегда его использовал, никаких проблем не было.

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

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


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

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

someObject.successFunc();



По такому принципу я у себя и реализовал, но за информацию спасибо!
...
Рейтинг: 0 / 0
01.11.2016, 04:09
    #39338414
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Автоматический обработчик html форм на JS
вадяПрограмёр,
за использование 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
01.11.2016, 04:12
    #39338415
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Автоматический обработчик html форм на JS
urukhay Програмёр ,
идея интересная, но у меня почти тоже самое ))
Единственное, я сделал вызов недефолтных обработчиков по другому механизму.
Но объяснить мне это будет сложно, тогда мне придется особенности своего движка тут рассказывать ))

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

Форму в строку параметров переводит. Кстати... забыл упомянуть, что мой код файлы не отправляет. Но думаю Ваш тоже не отправляет, потому не страшно... Для файлов надо отдельную ветку кода пилить, или разные ajaxForm подключать
...
Рейтинг: 0 / 0
01.11.2016, 04:19
    #39338418
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Автоматический обработчик html форм на JS
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
01.11.2016, 05:21
    #39338423
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Автоматический обработчик html форм на JS
urukhayвадя,
прямо-таки отказываться? Почему?
Всегда его использовал, никаких проблем не было.

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

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

Код: 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
01.11.2016, 05:55
    #39338427
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Автоматический обработчик html форм на JS
вадя
Код: javascript
1.
window[имя_объекта][имя_функции](данные)




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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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


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