HTML: <html> <head> <title>REGISTER</title> <script src="/Template/script/jquery-3.2.0.min.js"></script> </head> <body> <form> Имя <input name="name" type="text" /><br /> <hr /> почта <input name"email" type="text" /><br /> <hr /> Пароль <input name="password" type="password" /><br /> <hr /> Повторите пароль <input name="d_password" type="password" /><br /> <hr /> <input type="submit" value="Регистрация"><br /> </form> <div id="results"> <p>привет клуша</p> </div> <script> $("form").on("submit", function (event) { event.preventDefault(); var msg = $('form').serialize(); $.ajax({ type: 'POST', url: 'http://matronet.com/register-welc', data: msg, dataType: "html", success: function(data) { alert(data)// Это отрабатывает $('#results').html(data); // Не работает document.getElementById("results").innerHTML = data; // Не работает document.getElementById("results").innerHTML = 'ДЕБИЛ ЧТОЛИ?'; // Не работает }, error: function(xhr, str){ alert('Возникла ошибка: ' + xhr.responseCode); } }); </script> <hr> Досвидания робокоп </body> </html> Не отрабатывают метода вставки html какого - то хрена...
@askanim ты обратился к id через # а надо для класса . (точку) и смотри, классов может быть несколько
@denis01 Ой не изменил сук... Но не в этом дело, результат тот же --- Добавлено --- А ещё угадайте в каком порядке отработают алерты ) Код (Javascript): function ajaxF(url, msg) { alert(2); $.ajax({ type: 'POST', url: url, data: msg, dataType: "html", success: function(data) { alert(3); alert(data); return data; }, error: function(xhr, str){ alert('Возникла ошибка: ' + xhr.responseCode); } }); } $("form").on("submit", function (event) { event.preventDefault(); var msg = $('form').serialize(); var html = ajaxF('http://matronet.com/register-welc', msg); alert(1); /*alert(html); $("#results").html(html);*/ });
Правильно поулчается success отрабатывает у якса после прочтения всего html документа ? Я подозреваю моя проблема связана с тем что нужно обновить dom элемент, но как это сделать ?
success отрабатывается после окончания запроса к серверу, причем завершившегося удачно. Добро пожаловать в чудный, асинхронный мир )
@romach то есть у меня html отрабатывается быстрее чем идёт запрос к серверу. Точно это же асинхронный запрос. Как я мог забыть.
@romach но суть не в этом как заставить эту магию работать ? --- Добавлено --- @romach он не ругается в консоли он просто не выводит в комментариях же в первом коде написал что работает а что нет) --- Добавлено --- @denis01 я просто пробовал ещё классы и сюда случайно добавил не изменив класс, на id, сюда выложил уже по не внимательности
@romach а мне тут один фронт енд щик с конторы подсказал) И получилось хотите на результат посмотреть ? --- Добавлено --- @romach а ты мой скрипт попробуй --- Добавлено --- HTML: <html> <head> <title>REGISTER</title> <script src="/Template/script/jquery-3.2.0.min.js"></script> </head> <body> <form> Имя <input name="name" type="text" /><br /> <hr /> почта <input name"email" type="text" /><br /> <hr /> Пароль <input name="password" type="password" /><br /> <hr /> Повторите пароль <input name="d_password" type="password" /><br /> <hr /> <input id="cli" type="submit" value="Регистрация"><br /> </form> <div id="results"> <p>привет клуша</p> </div> <script> var data; function ajaxF(url, msg) { $.ajax({ type: 'POST', url: url, data: msg, dataType: "html", success: function(data) { data = data; $("#results").html(data); }, error: function(xhr, str){ alert('Возникла ошибка: ' + xhr.responseCode); } }); } $("#cli").on("click", function (event) { event.preventDefault(); var msg = $('form').serialize(); ajaxF('http://matronet.com/register-welc', msg); }); </script> <hr> Досвидания робокоп </body> </html> --- Добавлено --- А вот и работающий скрипт тададададададаа --- Добавлено --- @romach только при указании внешной переменной робит)
https://jsfiddle.net/cae5mca0/1/ - всё работает. блеать! Вот чую скоро придут Сурикат с Ганзалом и назовут всех нас идиотами. --- Добавлено --- ща, напишу в чем твой косяк ) и фронтендщика )
Все дело в асинхронности. Пост: https://php.ru/forum/threads/pri-ajax-zaprose-ne-vidno-dom-ehlementa.62895/#post-510431 Код (Javascript): function ajax() { $.ajax({..., success: function(response) { return response; }}) } var result = ajax(); Тут ты ожидаешь, что функция вернет тебе результат, но этого никогда не произойдет. Потому как success выполнится после завершения запроса и return уйдет в никуда, т.к. к этому моменту ajax() уже давно выполнился и вернул пустоту. Если же сделать return $.ajax - то все равно ничего не выйдет, вернется promise, а не результат запроса. Собственно это правильно, альтернатива - повесить процесс в ожидании запроса, что естественно делать ни кто не будет. В последнем варианте фронтендщик предложил тебе поднять область видимости переменной, правда криво, т.к. на самом деле ничего не изменилось и function(data) перекрыла ту data что выше. Очевидно где-то у него это проканало, примерно так: Код (Javascript): var foo; function set(bar) { foo = bar; } set(5); console.log(foo); Так вот, если тайминги сойдутся и боги асинхронности в хорошем настроении, то всё вроде как прокатит: данные передались и обработались. Если же нет - то получим веселый и трудноуловимый глюк. Как-то вот так: Код (Javascript): var foo; function set(bar) { foo = bar; } setTimeout(set.bind(this, 5), 1); setTimeout(function() { console.log(foo) }, 2); // 5 setTimeout(set.bind(this, 4), 2); setTimeout(function() { console.log(foo) }, 1); // 5 setTimeout(function() { console.log(foo) }, 3); // 4 Почему стало работать? Потому что в последнем примере $("#results").html(data); выполняется сразу после получения данных.
Я тебе больше скажу, даже если бы произошло, результат возвращается в success-коллбэк и там же помирает. Ретурны вне коллбэков вообще ничего не дадут. По этому и накостылили они внешнюю переменную. А ведь можно было просто почитать документацию по JQuery ajax, чтобы понять, что там за коллбэки, когда вызываются, как работают, что принимают. А еще лучше почитать вообще документацию по AJAX и асинхрону. Коллбэки, промисы, это вот все.
@Fell-x27, ну собсно да, просто я как-то коряво это процесс описал ) p.s. как хорошо с реактом, собрал данные, сделал setState() и оно перерисовалось где нужно. ми-ми-ми
1)Коллбэки были не в JS придуманы. Это один из самых древних способов написания асинхронного кода. 2)Тот факт, что AJAX асинхронен, как бы следует из его аббривеатуры. 3)То, что ты это не знал, не проблема JS. 4)Сначала изучи язык, потом пользуйся. 5)Ты еще и JS-а то не видел. Так, чуток в замочную скважину заглянул, одним глазком. Мельком. Да и то через розовые копипастовые очки JQuery, хехе. 6)Вот когда дорастешь до замыканий хотя бы,а, конкретнее, до сознательного их применения и понимания, тогда поговорим.
Можно в двух словах, чем оно удобнее нативного промиса? Или оно появилось еще до того, как промисы завезли прост?
@Fell-x27 промисы - это когда тебе надо выполнить последовательность действий. caolan/async же полезен когда тебе нужно выполнить ряд таких последовательностей в цикле и желательно в несколько потоков. Тогда ты делаешь async.eachLimit(items, 4, function i(item, callback) {// do stuff}, function() {//complete}) и не паришься ) Впрочем, я не представляю как это может быть полезно на фронте )
Да, такие же мысли появились. Но все равно, спасибо, мб пригодится когда-нибудь, когда у меня руки дойдут до ноды.
в php я использую замыкания И это я использовал в php. Но я про другое, в js страдает логика, как вот в примере который я приводил, но я сужу только потому как работает вообще в принципе логика) Ведь алгоритмы строятся на логике)
@Fell-x27 Я как бы про них знаю читал видел, использовал. Но я не совсем понимаю почему замыкание, почему callback можешь объяснить. Асинхронность я понимаю что такое. Это выполнения действия паралельно (Ну как то так если своими словами). Кэлбэк функция - это вызов функции по завершении . замыкание как я вижу из php это передача в функцию внешних переменных. Но я опять же не догоняю их предназначения что замыкания что callback вызовов. Если можешь объясни пожалуйста. Ну в асинхроне понятно зачем кэлбэк нужен. У нас получается как пошёл запрос а код ушёл дальше. Всё логично. А потом по завершению запроса сработал callback. И в теории он должен выполнится.
В примере, который ты привел, логика крепче, чем Эйфелева Башня. 1) Послать запрос. 2) Если успешен - вызвать succsess-коллбэк. 3) Если пофейлен - вызвать error-коллбэк. 4) Если указан финализирующий коллбэк - вызвать его в конце работы, независимо от результатов. Я хз, что нелогичного ты тут нашел. Это же обычная событийная модель. А каждый коллбэк - это обработчик события. Нелогично то, что ты пытался там творить. Ты же даже в php умудряешься юзать замыкания(зачем??7??7??, может ты их с анонимными функциями путаешь?) и коллбэки. Но при этом не знаешь, что это? Нет. Не обязательно. Параллелизм - это распределение задачи по разным потокам. Асинхронизм же может работать и в одном потоке без проблем. JS в браузере, к примеру, по умолчанию однопоточный. Суть асинхронного кода в том, что, при выполнении некоторой инструкции, система не будет ждать ее завершение, а сразу перейдет к следующей. При этом процессорное время асинхронных задач смешивается и перемежается. Благодаря этому у нас есть в JS такой инструмент как setTimeout(function(){},0); Он ставит некую переданную инструкцию(анонимную функцию, в данном случае), в самый конец очереди задач в потоке. Новичок посмотрит на этот сетТаймаут, и подумает, что это глупость, потому что какой смысл указывать его нулевым, если можно просто сделать (function(){})(). Опытный же JS-ник значет, что эта конструкция значит не "выполни прямо сейчас", а "выполни, как только появится свободное процессорное время, но не ранее того, и без задержек от того момента, пожалуйста". Это часто очень пригождается. Коллбэк вызывается не обязательно по завершению чего-либо. Коллбэк - это просто некая функция, которая дергается в процессе работы. При этом она не прописана жестко и, обычно, является параметром. Есть же всякие array_функции, которые принимают callback в качестве параметра и используют его для каждого элемента массива. Некий код, который ты отдаешь куда-то с целью его выполнения при определенных условиях. То есть в случае: Код (Javascript): function foo(){ alert("pewpew"); } function bar(){ //do something foo(); } bar(); //alert "pewpew" Функция foo не является коллбэком. Хоть она и вызывается после чего-то там. Это просто функция. Она просто вызвана в другой функции. А вот другой случай: Код (Javascript): function bar(variable, callback){ //do something if (variable>1){ callback(); } } bar(2,function(){ alert("pewpew"); }); Вот тут уже работаем с коллбэком. Он не зашит в теле вызываемой функции. Мы можем его указать отдельно для каждого вызова. Передача в функцию внешних переменных - это вызов функции с параметрами. Замыкания - это создание функции, которая сохраняет при этом свой local scope. В JS это жизненная необходимость в силу специфики его работы. В PHP, если тебе нужно замыкание, то у тебя, скорее всего, что-то пошло не так, ИМХО.
насколько я знаю в php замыкание, это использование use. Да я это и имел ввиду просто не правильно объяснил. Но спасибо благодаря тебе я понял больше. Но тут складывается зачем все framework используют замыкания. Это например пример из slim, причём пример из доки. PHP: $app->group('/admin', function () use ($app) { $app->get('/date', function (Request $request, Response $response) { return $response->getBody()->write(date('Y-m-d H:i:s')); }); $app->get('/time', function (Request $request, Response $response) { return $response->getBody()->write(time()); }); })->add(function (Request $request, Response $response, $next) { if(!isset($_SESSION['user_id'])) { return $response->withStatus(302)->withHeader('Location', '/login'); } $response->getBody()->write('It is now '); $response = $next($request, $response); $response->getBody()->write('. Enjoy!'); return $response; }); При чём этот пример использует в php как замыкание так и функцию обратного вызова, callback а именно $next() Кэлл бэки я использвал, просто я не знал что это называется кэлл бэком. Я с помощью кэлл бэка реализовал в своём движке функцию групп маршрутов. Как в принципе она реализована во многих framework или по другому если я всё правильно понимаю middleware