Обработка формы с чистого php на ajax + php

12 3
D
На сайте с 28.06.2008
Offline
1104
633

Написал небольшой скрипт строк на 300, который получает на входе данные из двух полей в форме, методом пост передает их себе же.

Эти данные из двух полей вызывают два запроса в базу, на основании которых выводится таблица, которая заполняется через echo, а ниже, уже в цикле происходит еще один запрос в базу и так же echo выводится инфа.

Все работает как и задумывалось, то теперь хочу сделать всю эту красоту безе перезагрузки страницы.

Научился отправлять и обрабатывать POST запросы на ajax, но не пойму - а как же мне вывести в нужные места с десяток данных?

Сейчас, одна тестовая переменная выводится у меня функцией

function(msg) {
$('#my_message').html(msg);
}

А когда нужно 10-20 разных переменных вывести, которые получаются в результаты обработки первых двух ПОСТ переменных - то как это делается?

S3
На сайте с 29.03.2012
Offline
327
#1

300 строк? Хочу увидеть этот чудоскрипт!

Stolz
На сайте с 25.01.2007
Offline
181
#2

Ну так в заголовке же написано - ajax. Правильно написано.

Надо разбить скрипт на две части. И запросы отправлять изнутри страницы через ajax, получая данные и выводя их, совершенно верно, через указанную функцию.

D
На сайте с 28.06.2008
Offline
1104
#3

Изначально юзер видит просто форму с двумя полями.

В них он вводит по два слова, которые запрашиваются в базу и возвращают массивы с которыми я дальше работаю.

Один из эти подмассивов вызывает еще каскад запросов в базу и на выходе у меня с десяток переменных, а то и больше не считал.

Т.е. ушло со страницы 1 пост запрос с двумя переменными, а вернуть и разместить в разных местах (в таблице) нужно 10-20 переменных. Вот я и не пойму как это сделать.

Сейчас да - я разделил скрипт на две части

1. просто форма и JS код, отправляющий данные из формы пхп скрипту.

2. пхп скрипт с логикой.

непонятно как много переменных из логики обратно вернуть на страницу отдельными частями ?

---------- Добавлено 18.04.2020 в 09:50 ----------

Наверное мне в пхп скрипте где логика в самом низу нужно собрать все переменные в ассоциативный массив и передать обратно на страницу с формой в виде JSON ?

IL
На сайте с 20.04.2007
Offline
435
#4

Можно:

а) возвращать PHP-скриптом HTML и, соответственно заменять блок целиком.

б) разобраться сколько всего переменных.. и каких.. и как они расставляются.. возможно, связать их имена|id-шники с селекторами и пробежаться циклом по получаемому JSON примерно так:

for(prop in data) {
$('#'+prop).html(data.prop);
}
... :) Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )
D
На сайте с 28.06.2008
Offline
1104
#5

ivan-lev, спасибо! Мне кажется первый вариант идеально бы подошел в плане того, что переделывать меньше придется.

В итоге всю таблицу и все что ниже присвоить одной переменной?

И уже ее выводить?

S
На сайте с 30.09.2016
Offline
469
#6
Dram:
Мне кажется первый вариант идеально бы подошел в плане того, что переделывать меньше придется.

Именно, что кажется. Ни к чему без необходимости постоянно пересылать кучу хтмл-кода, который можно просто написать на странице. И вёрстка более наглядно будет смотреться. Правильнее объект с данными на стороне сервера закодировать в джейсон, а на стороне клиента вставлять эти данные в нужные места.

Первый вариант чаще применяют, когда этот код нужен по требованию, например, форма обратной связи.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
D
На сайте с 28.06.2008
Offline
1104
#7

Сори за тупые вопросы, с 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>
и т.д. согласно элементам массива, но попробовал вывести этот див - а он пустой...

а

console.log(msg.prop);
выдает - undefined
S
На сайте с 30.09.2016
Offline
469
#8

function(msg) { 

$('#my_message1').html(msg.prop1);
$('#my_message2').html(msg.prop2);
$('#my_message3').html(msg.prop3);
$('#my_message4').html(msg.prop4);
}
D
На сайте с 28.06.2008
Offline
1104
#9

Sitealert, выдает - undefined

S
На сайте с 30.09.2016
Offline
469
#10

Dram, ну надо же конкретно прописывать объекты. Этот код – для примера.

12 3

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий