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


Dram
610

Написал небольшой скрипт строк на 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>

и т.д. согласно элементам массива, но попробовал вывести этот див – а он пустой…

а

console.log(msg.prop);

выдает – 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, ну надо же конкретно прописывать объекты. Этот код – для примера.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *