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

@stashappy · Регистрация: 21.08.2011

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Учусь по учебнику "Бретт Маклафлин - Изучаем 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.

@alpex · 14.11.2012, 15:07

любые данные приходящие из вне обязательно нужно проверять не зависимо от того проверялись ли они js или нет
проверку у клиента можно сделать для того что б не грузить сервер заведомо неправильными запросами, но все равно на сервере их нужно проверять опять

Добавлено через 40 секунд

Сообщение от stashappy

А если этих полей 10

можно например в массиве данные передавать

@stashappy · 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>, в который помещается возвращаемый сервером результат. Но если результатов несколько... Что если сервер возвратил например, два результата, как в примере выше. Именно это, я и не могу понять. Как их разделить и вывести на страницу.

@alpex · 14.11.2012, 15:39

ну так назад тоже массив возвращайте

@stashappy · 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() вставляет содержимое. Но как, вставлять, пришедший результат опять же не понятно.

@alpex · 15.11.2012, 01:14

http://habrahabr.ru/post/42426/

@spyeye · 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 секунд
И так хоть со ста переменными.

@stashappy · 15.11.2012, 18:49 **[ТС]**

Вы правы. На jquery все это реализуется гораздо быстрее. Сегодня перевел форму регистрации у себя, на jquery.ajax. Получилось отлично. Страница не перезагружается. Пользователи, будут чувствовать себя комфортнее.

Кстати, вот тут, добрый человек, мне посоветовал способ реализации данной задачи:
jquery.ajax поле - data:

Новые блоги и статьи Все статьи Все блоги /
[golang] Алгоритм «Хак Госпера» alhaos 17.05.2026 Алгоритм «Хак Госпера» Хак Госпера (Gosper's Hack) — алгоритм нахождения следующего по величине числа с тем же количеством установленных бит. Придуман Биллом Госпером в 1970-х, опубликован в. . .	Рисование бинарного древа до 6-го колена на js, svg. russiannick 17.05.2026 <svg width="335" height="240" viewBox="0 0 335 240" fill="#e5e1bb"> <style> <!]> </ style> <g id="bush"> </ g> </ svg> function fn(){ let rost;/ / высота древа let xx=165,yy=210,w=256;	FSharp: interface of module DevAlt 16.05.2026 Интерфейс модуля F# позволяет управлять доступностью членов, содержащихся в реализации модуля. По-умолчанию все члены модуля доступны: module Foo let x = 10 let boo () = printfn "boo" . . .	Хитросплетение родственных связей пантеона греческих богов. russiannick 14.05.2026 Однооконник, позволяющий узреть и изучить отдельных героев древней Греции. <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible". . .
[golang] Угол между стрелками часов alhaos 12.05.2026 По заданным значениям часа и минуты необходимо определить значение меньшего угла между стрелками аналогового циферблата часов. import "math" func angleClock(hour int, minutes int) float64 { . . .	Debian 13: Установка Lazarus QT5 ВитГо 09.05.2026 Эта инструкция моя компиляция инструкций volvo https:/ / www. cyberforum. ru/ blogs/ 203668/ 10753. html и его же старой инструкции по установке Lazarus с gtk2. . .	Нейросеть на алгоритме "эстафета хвоста" как перспектива. Hrethgir 06.05.2026 На десерт, когда запущу сервер. Статья тут https:/ / habr. com/ ru/ articles/ 1030914/ . Автор я сам, нейросеть только помогает в вопросах которые мне не известны - не знаю людей которые знали-бы. . .	Асинхронный приём данных из COM-порта Argus19 01.05.2026 Асинхронный приём данных из COM-порта Купил на aliexpress термопринтер QR701. Он оказался странным. Поключил к Arduino Nano. Был очень удивлён. Наотрез отказывается печатать русские буквы. Чтобы. . .

@alpex 603 / 578 / 103 Регистрация: 16.07.2012 Сообщений: 1,762
	14.11.2012, 15:39
	ну так назад тоже массив возвращайте 1

@alpex 603 / 578 / 103 Регистрация: 16.07.2012 Сообщений: 1,762
	15.11.2012, 01:14
	http://habrahabr.ru/post/42426/ 0

@stashappy 42 / 42 / 13 Регистрация: 21.08.2011 Сообщений: 625
	15.11.2012, 18:49 [ТС]
	Вы правы. На jquery все это реализуется гораздо быстрее. Сегодня перевел форму регистрации у себя, на jquery.ajax. Получилось отлично. Страница не перезагружается. Пользователи, будут чувствовать себя комфортнее. Кстати, вот тут, добрый человек, мне посоветовал способ реализации данной задачи: jquery.ajax поле - data: 0