Форум программистов, компьютерный форум, киберфорум
PHP для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 
Рейтинг 4.59/29: Рейтинг темы: голосов - 29, средняя оценка - 4.59
 Аватар для stashappy
42 / 42 / 13
Регистрация: 21.08.2011
Сообщений: 625

Ajax отправка нескольких полей формы

13.11.2012, 16:17. Показов 5598. Ответов 26
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте!
Учусь по учебнику "Бретт Маклафлин - Изучаем Ajax". Прочел половину и не пойму, то ли я такой недалекий, то ли книга такая тяжелая. Вопрос. Каким образом, отправить несколько полей формы. И более того, как вытащить и использовать возвращенный сервером резутат.

Вот простейший код. Файл Index.php(Форма):
PHP
1
2
3
4
5
6
7
8
echo "<script language='javascript' src='text-utils.js'></script>";
echo "<script language='javascript' src='ajax.js'></script>";
 
echo "<form method='post'>";
echo "<input type='text' name='login' id='login' size='40' /><br><br>";
echo "<input type='button' value='Ok' onclick='getResult();' />";
echo "</form>";
echo "<div id='yes'></div>"
Файл Ajax.js:
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
var request = null;
 
function createRequest() {
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxm12.XMLHTTP");
} catch (othermicrosoft) {
try {
    request = new ActiveXObject("Microsoft.XMLHTTP");           
} catch (failed) {
request = null;
}           
}
}
}
 
function getResult() {
createRequest();
var text = document.getElementById('login').value;
var url = "result.php?login=" + escape(text);
var rnd = Math.floor(Math.random( ) * (9999999+1))
url = url + "&rd=" + rnd;
request.open("post", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
 
function updatePage() {
if(request.readyState==4) {
    if(request.status==200) {
    var newTotal = request.responseText;
    replaceText(yes, newTotal);
        }
    }
}

Файл result.php:
PHP
1
2
3
4
5
6
$login;
if(!empty($_REQUEST['login'])) {
    $login = $_REQUEST['login'];
    $login = iconv("utf-8", "windows-1251", $login);
    echo $login;
}


Функция replaceText() берется из файла text-utils.js. Она вставляет пришедшие данные в строку yes. Запись var rnd = Math.floor(Math.random( ) * (9999999+1)) - я добавил сам, чтобы url всегда был разным.


Я не пойму одного. Как принять и обработать те данные, которые у нас приходят после обработки скриптом result.php. В этом примере, представлена форма, с одним полем login. А если этих полей 10. Передать то их можно. Если я не ошибаюсь, для этого просто достаточно дописать переменную url, в функции getResult(). А вот как принять все эти 10 полей, после обработки их на стороне сервера? Чтобы каждое поле можно было обработать индивидуально. Если, скажем, в одном из этих полей, есть ошибка, вывести соответствующую ошибку. Итд. Вот такой вот вопрос. Изначальная цель : Хочу перевести форму регистрации у себя на сайте, в более быстрый вариант(без перезагрузки страницы) с использованием ajax.
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
13.11.2012, 16:17
Ответы с готовыми решениями:

Отправка формы AJAX
Привет, решил воспользоваться данной инструкцией https://www.poseti.net/articles/otpravka-formyi/ Применил на своей форме. Как мне в...

Ajax отправка формы
Доброй ночи уважаемые форумчане, наткнулся на такую проблему, хочу разделить обработчик формы и шаблон. Подскажите, что здесь не так. P.S....

Валидация формы и отправка на ajax
Привет всем! Делаю валидацию формы и после отправку писем с помощью jquery ajax Возникла проблема! После проверки полей форма не...

26
 Аватар для alpex
603 / 578 / 103
Регистрация: 16.07.2012
Сообщений: 1,762
14.11.2012, 15:07
Студворк — интернет-сервис помощи студентам
любые данные приходящие из вне обязательно нужно проверять не зависимо от того проверялись ли они js или нет
проверку у клиента можно сделать для того что б не грузить сервер заведомо неправильными запросами, но все равно на сервере их нужно проверять опять


Добавлено через 40 секунд
Цитата Сообщение от stashappy Посмотреть сообщение
А если этих полей 10
можно например в массиве данные передавать
1
 Аватар для stashappy
42 / 42 / 13
Регистрация: 21.08.2011
Сообщений: 625
14.11.2012, 15:36  [ТС]
можно например в массиве данные передавать
С передачей проблем нет. А вот как принять эти 10 значений и обработать каждую из них.
Пример:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
function send() {
var data = $('#login').val();
var data2 = $('#text').val();
$.ajax({
type: "POST",
url: "result.php",
data: "login=" + data + "&text=" + data2, // вот тут перечисляем передаваемые скрипту значения
success: function(html) {
$("#yes").empty();
$("#yes").append(html);
    }
     });
}
Отправляю две пары ключ/значение. Сервер должен обработать каждое значение и что то вернуть. Например, текст ошибки или еще что-нибудь, если одно из полей неверно.

На php, без использования ajax, у себя на сайте, я бы это сделал примерно вот так:

PHP
1
2
3
4
5
6
7
8
if(isset($_POST['submit'])) { /* была ли нажат кнопка */
  if(empty($_POST['login'])) { /* если поле login пустое, выводим ошибку */
    echo "Ошибка. Введите логин";
  }
  if(empty($_POST['text'])) { /* если поле text пустое, выводим ошыбку */
    echo "Ошибка. Введите текст.";
  }
}
И все. Тут все просто. Проверяем два поля. При нажатии кнопки, если оба поля пусты, на страницу выходят две ошибки. А с использованием ajax, мне не совсем понятно, как обработать эти два возвращаемых результата. Был бы один, то никаких проблем. Но если несколько, то как их разделить и каждый вывести на страницу..


Вот пример того, как вывести на страницу, одиночный резутат, в результате успешного выполнения ajax запроса:

JavaScript
1
2
3
4
success: function(html) {
$("#yes").empty();
$("#yes").append(html);
}
Здесь yes - это контейнер на странице, <div id='yes'></div>, в который помещается возвращаемый сервером результат. Но если результатов несколько... Что если сервер возвратил например, два результата, как в примере выше. Именно это, я и не могу понять. Как их разделить и вывести на страницу.
0
 Аватар для alpex
603 / 578 / 103
Регистрация: 16.07.2012
Сообщений: 1,762
14.11.2012, 15:39
ну так назад тоже массив возвращайте
1
 Аватар для stashappy
42 / 42 / 13
Регистрация: 21.08.2011
Сообщений: 625
14.11.2012, 17:05  [ТС]
ну так назад тоже массив возвращайте
А как это сделать? У меня ничего не получилось.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function send() {
$.ajax({
type: "POST",
url: "result.php",
data: // сюда надо как то вставить массив c переменными login и text
success: function(html) {
$("#yes").empty();
$("#yes").append(html);
    }
     });
}
Файл result.php:
PHP
1
2
$data = array('test1','test2');
echo $data;
Наверное так. Незнаю. А как дальше? И как вставить массив с данными в поле data: функции send()?
Господи, сегодня целый день с этой фигней вожусь.

Добавлено через 24 минуты
Функция append() вставляет содержимое. Но как, вставлять, пришедший результат опять же не понятно.
0
 Аватар для alpex
603 / 578 / 103
Регистрация: 16.07.2012
Сообщений: 1,762
15.11.2012, 01:14
http://habrahabr.ru/post/42426/
0
31 / 31 / 2
Регистрация: 06.08.2012
Сообщений: 155
15.11.2012, 16:17
Книга шлак, выкиньте её и скачайте\купите нормальную.
Да и вообще, зачем вам учиться говнокоду, если можно всё реализовать красиво через jQuery?
В данном случае вам нужно объявить переменные и поместить в них данные.
JavaScript
1
2
3
4
5
var login = $('input[name*="login"]').val();
$.post("test.php", { login: login },
   function(data) {
     $('#yes').html(data);
   });
PHP
1
2
3
if( isset( $_POST['login'] ) ){ // проверяем наличие
echo 'Вы ввели: '.$_POST['login']; // выводим
}
И так, в нормальной книге вам бы всё объяснили:
Берем селектор input и добавляем фильтр [name*="xxx"], чтобы получить введенное значение считываем поле value методом val() и результат этих действий сохраняем в переменной login.
После выполнения вызываем callback-функцию, которая выведет результат в элемент с id="yes".
Функция html(data) заменяет всё внутри элемента на data - возвращаемое значение.
Не забудьте отменить отменить стандартное поведение submit'a через return false; и не забудте подключить библиотеку jQuery.

Добавлено через 4 минуты
Ну а как обрабатывать? Да как угодно.
PHP
1
2
3
4
5
6
7
if ( $_POST['login'] != 'porno' ) {
$data .= "Вы что-то не то ввели\n";
}
if( empty ( $_POST['login'] ) ){
$data .= "Пусто\n";
}
echo $data;
Добавлено через 27 секунд
И так хоть со ста переменными.
1
 Аватар для stashappy
42 / 42 / 13
Регистрация: 21.08.2011
Сообщений: 625
15.11.2012, 18:49  [ТС]
Вы правы. На jquery все это реализуется гораздо быстрее. Сегодня перевел форму регистрации у себя, на jquery.ajax. Получилось отлично. Страница не перезагружается. Пользователи, будут чувствовать себя комфортнее.

Кстати, вот тут, добрый человек, мне посоветовал способ реализации данной задачи:
jquery.ajax поле - data:
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
15.11.2012, 18:49
Помогаю со студенческими работами здесь

Отправка формы на почту без заполнения полей
Доброго времени суток! У меня такая ситуация. Есть форма отправки данных на почту. Но почему-то она отправляет письмо при каждом...

Отправка формы без перезагрузки страницы (AJAX)
Все работает нормально, но почему то дублируются поля ввода ИМЯ и СООБЩЕНИЕ после нажатия на кнопку отправить &lt;!DOCTYPE html PUBLIC...

Отправка формы без перезагрузки страницы Ajax
Здравствуйте! Никак не могу отправить. В чем ошибка, если есть? Файлы index.html и jquery.js находятся в папке ajax на рабочем столе....

AJAX: Отправка параметров из формы. [?Как это сделать?]
Здравствуйте! Есть таблица отображающая список с БД. Есть кнопка в каждом ряду таблицы для удаления определенного ряда (php файл...

Ajax отправка данных из формы в базу mysql и вывод из базы mysql
$(function() { $('#chat_submit').click(function(e) { e.preventDefault(); var chat_name =...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
27
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств
8Observer8 07.02.2026
Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru