Написал небольшой скрипт строк на 300, который получает на входе данные из двух полей в форме, методом пост передает их себе же.
Эти данные из двух полей вызывают два запроса в базу, на основании которых выводится таблица, которая заполняется через echo, а ниже, уже в цикле происходит еще один запрос в базу и так же echo выводится инфа.
Все работает как и задумывалось, то теперь хочу сделать всю эту красоту безе перезагрузки страницы.
Научился отправлять и обрабатывать POST запросы на ajax, но не пойму — а как же мне вывести в нужные места с десяток данных?
Сейчас, одна тестовая переменная выводится у меня функцией
function(msg) { $(‘#my_message’).html(msg); }
А когда нужно 10-20 разных переменных вывести, которые получаются в результаты обработки первых двух ПОСТ переменных — то как это делается?
Sly32
300 строк? Хочу увидеть этот чудоскрипт!
Stolz
Ну так в заголовке же написано — ajax. Правильно написано.
Надо разбить скрипт на две части. И запросы отправлять изнутри страницы через ajax, получая данные и выводя их, совершенно верно, через указанную функцию.
Dram
Изначально юзер видит просто форму с двумя полями.
В них он вводит по два слова, которые запрашиваются в базу и возвращают массивы с которыми я дальше работаю.
Один из эти подмассивов вызывает еще каскад запросов в базу и на выходе у меня с десяток переменных, а то и больше не считал.
Т.е. ушло со страницы 1 пост запрос с двумя переменными, а вернуть и разместить в разных местах (в таблице) нужно 10-20 переменных. Вот я и не пойму как это сделать.
Сейчас да — я разделил скрипт на две части
1. просто форма и JS код, отправляющий данные из формы пхп скрипту.
2. пхп скрипт с логикой.
непонятно как много переменных из логики обратно вернуть на страницу отдельными частями ?
———- Добавлено 18.04.2020 в 09:50 ———-
Наверное мне в пхп скрипте где логика в самом низу нужно собрать все переменные в ассоциативный массив и передать обратно на страницу с формой в виде JSON ?
ivan-lev
Можно:
а) возвращать PHP-скриптом HTML и, соответственно заменять блок целиком.
б) разобраться сколько всего переменных.. и каких.. и как они расставляются.. возможно, связать их имена|id-шники с селекторами и пробежаться циклом по получаемому JSON примерно так:
for(prop in data) { $("https://searchengines.guru/ru/forum/#"+prop).html(data.prop); }
Dram
ivan-lev, спасибо! Мне кажется первый вариант идеально бы подошел в плане того, что переделывать меньше придется.
В итоге всю таблицу и все что ниже присвоить одной переменной?
И уже ее выводить?
Sitealert
Dram: Мне кажется первый вариант идеально бы подошел в плане того, что переделывать меньше придется.
Именно, что кажется. Ни к чему без необходимости постоянно пересылать кучу хтмл-кода, который можно просто написать на странице. И вёрстка более наглядно будет смотреться. Правильнее объект с данными на стороне сервера закодировать в джейсон, а на стороне клиента вставлять эти данные в нужные места.
Первый вариант чаще применяют, когда этот код нужен по требованию, например, форма обратной связи.
Dram
Сори за тупые вопросы, с JS впервые разбираюсь.
Итак собрал я все переменные в массив json, проверил, обратно он приходит в ответе.
Теперь как советовал ivan-lev хочу пройтись по нему циклом и сформировать дивы для вставки в разные части таблицы.
Как это сделать — так?
function(msg) { // получен ответ сервера console.log(JSON.parse(msg)); for(prop in JSON.parse(msg)) { $('#my_message'+prop).html(msg.prop); } // $('#my_message').html(msg); }
Как теперь понять какой $(‘#my_message’+prop).html(msg.prop); какую переменную содержит?
———- Добавлено 18.04.2020 в 11:44 ———-
Вроде бы
<div id=»my_messageName»></div>
и т.д. согласно элементам массива, но попробовал вывести этот див — а он пустой…
Dram
Написал небольшой скрипт строк на 300, который получает на входе данные из двух полей в форме, методом пост передает их себе же.
Эти данные из двух полей вызывают два запроса в базу, на основании которых выводится таблица, которая заполняется через echo, а ниже, уже в цикле происходит еще один запрос в базу и так же echo выводится инфа.
Все работает как и задумывалось, то теперь хочу сделать всю эту красоту безе перезагрузки страницы.
Научился отправлять и обрабатывать POST запросы на ajax, но не пойму — а как же мне вывести в нужные места с десяток данных?
Сейчас, одна тестовая переменная выводится у меня функцией
$(‘#my_message’).html(msg);
}
А когда нужно 10-20 разных переменных вывести, которые получаются в результаты обработки первых двух ПОСТ переменных — то как это делается?
Sly32
300 строк? Хочу увидеть этот чудоскрипт!
Stolz
Ну так в заголовке же написано — ajax. Правильно написано.
Надо разбить скрипт на две части. И запросы отправлять изнутри страницы через ajax, получая данные и выводя их, совершенно верно, через указанную функцию.
Dram
Изначально юзер видит просто форму с двумя полями.
В них он вводит по два слова, которые запрашиваются в базу и возвращают массивы с которыми я дальше работаю.
Один из эти подмассивов вызывает еще каскад запросов в базу и на выходе у меня с десяток переменных, а то и больше не считал.
Т.е. ушло со страницы 1 пост запрос с двумя переменными, а вернуть и разместить в разных местах (в таблице) нужно 10-20 переменных. Вот я и не пойму как это сделать.
Сейчас да — я разделил скрипт на две части
1. просто форма и JS код, отправляющий данные из формы пхп скрипту.
2. пхп скрипт с логикой.
непонятно как много переменных из логики обратно вернуть на страницу отдельными частями ?
———- Добавлено 18.04.2020 в 09:50 ———-
Наверное мне в пхп скрипте где логика в самом низу нужно собрать все переменные в ассоциативный массив и передать обратно на страницу с формой в виде JSON ?
ivan-lev
Можно:
а) возвращать PHP-скриптом HTML и, соответственно заменять блок целиком.
б) разобраться сколько всего переменных.. и каких.. и как они расставляются.. возможно, связать их имена|id-шники с селекторами и пробежаться циклом по получаемому JSON примерно так:
for(prop in data) {$("https://searchengines.guru/ru/forum/#"+prop).html(data.prop);
}
Dram
ivan-lev, спасибо! Мне кажется первый вариант идеально бы подошел в плане того, что переделывать меньше придется.
В итоге всю таблицу и все что ниже присвоить одной переменной?
И уже ее выводить?
Sitealert
Мне кажется первый вариант идеально бы подошел в плане того, что переделывать меньше придется.
Именно, что кажется. Ни к чему без необходимости постоянно пересылать кучу хтмл-кода, который можно просто написать на странице. И вёрстка более наглядно будет смотреться. Правильнее объект с данными на стороне сервера закодировать в джейсон, а на стороне клиента вставлять эти данные в нужные места.
Первый вариант чаще применяют, когда этот код нужен по требованию, например, форма обратной связи.
Dram
Сори за тупые вопросы, с JS впервые разбираюсь.
Итак собрал я все переменные в массив json, проверил, обратно он приходит в ответе.
Теперь как советовал ivan-lev хочу пройтись по нему циклом и сформировать дивы для вставки в разные части таблицы.
Как это сделать — так?
function(msg) { // получен ответ сервераconsole.log(JSON.parse(msg));
for(prop in JSON.parse(msg)) {
$('#my_message'+prop).html(msg.prop);
}
// $('#my_message').html(msg);
}
Как теперь понять какой $(‘#my_message’+prop).html(msg.prop); какую переменную содержит?
———- Добавлено 18.04.2020 в 11:44 ———-
Вроде бы
и т.д. согласно элементам массива, но попробовал вывести этот див — а он пустой…
а
выдает — undefined
Sitealert
function(msg) {$('#my_message1').html(msg.prop1);
$('#my_message2').html(msg.prop2);
$('#my_message3').html(msg.prop3);
$('#my_message4').html(msg.prop4);
}
Dram
Sitealert, выдает — undefined
Sitealert
Dram, ну надо же конкретно прописывать объекты. Этот код – для примера.