[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: [AJAX] Отправка данных из формы
5maks5
Здравствуйте.
Сегодня понадобилось отправлять данные через технологию AJAX. Но есть проблема... Я с ней вообще не знаком так сказать.

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

Подробнее:
1. Имеется поле name.
2. Вводим значение и отправляем в обработчик (test.php).
3. В обработчике проверяем на правильность ввода имени (моя забота).
4. Если всё верно, то делаем редирект: Header("Location:test1.ru/user/" . $_POST['name'] . "");
5. Если ошибка валидации, то выводим текст ошибки к примеру в <div id="result"></div> без перезагрузки страницы.

Помогите пожалуйста реализовать такую отправку средствами ajax.
Заранее большое спасибо.



Спустя 21 минута, 30 секунд (21.08.2011 - 11:06) quickxyan написал(а):
ну как-то так:


<script type="text/javascript" src="js/jquery.js"></script>
<
script type="text/javascript">
function func(){
var text = document.getElementById('name').value;
$.ajax({
type: 'POST',
url: "test.php",
data: {name: text},
error: function () {alert("error");},
success: function () {location.href = "itest1.ru/user/"+text}
}
);
}
</script>


<
input type="text" id="name">
<
button onclick="func()">send</button>


Спустя 7 минут, 17 секунд (21.08.2011 - 11:13) 5maks5 написал(а):
Немного не то.
Редирект должен быть в обработчике и срабатывать только тогда, когда нет ошибок валидации.

Я тут проводил анализ и наткнулся на интересный момент. Именно то что мне нужно.
www.cy-pr.com тут человек вводит домен и если он прошёл проверку на правильность то тоже идёт редирект.

Мне нужно тоже самое но с полем name.

Спустя 12 минут, 10 секунд (21.08.2011 - 11:25) quickxyan написал(а):
ну тогда надо сделать типа такого(писал с головы, так что могу ошибиться:)) :


<script type="text/javascript" src="js/jquery.js"></script>
<
script type="text/javascript">
//функция отправки данных
function func(){
var text = document.getElementById('name').value;
$.ajax({
type: 'POST',
url: "test.php",
data: {name: text},
error: function () {alert("error");},
success: function () {func1(data, text); },
dataType: "json"
});
}

//функция обработки ответа
func1(data, text){
alert(data);
//и тут проверка чему равна переменная и если надо,
//то редирект

location.href = "itest1.ru/user/"+text
}

</script>

//форма
<input type="text" id="name">
<
button onclick="func()">send</button>


test.php

//коды проверок
//если прошел проверку, то $flag = 1, а нет, то $flag = 0;

echo json_encode($flag);

Спустя 5 минут, 28 секунд (21.08.2011 - 11:31) 5maks5 написал(а):
Второй вариант не работает почему-то, а первый не ловит значение поля name, не подставляет в редирект имя.

Спустя 3 минуты, 43 секунды (21.08.2011 - 11:35) quickxyan написал(а):
в первом попутал имена переменных) сейчас подправил, а вот второе сейчас проверю у себя smile.gif

Спустя 10 минут, 43 секунды (21.08.2011 - 11:45) quickxyan написал(а):
вобщем на этом моя помощь заканчиваеться smile.gif я вчера почти с той же проблемой игрался и таки решил похожим методом. а вот сегодня с меня опять js прикалываеться - даже функцию не хочет запускать %)

Спустя 14 минут, 42 секунды (21.08.2011 - 12:00) 5maks5 написал(а):
Ясно smile.gif
Может кто-то другой поможет.

Спустя 15 минут, 29 секунд (21.08.2011 - 12:16) quickxyan написал(а):
5maks5
да почитал бы где-то или поигрался с тем кодом, что я дал. впринципе ничего особо сложного нету - я просто вчера весь день сидел и с меня код реально прикалываеться smile.gif

Спустя 1 час, 10 минут, 15 секунд (21.08.2011 - 13:26) AlexWindHope написал(а):
Задача довольно таки простая...


<script type="text/javascript">
/*
* Функция nameValidation вешается на onblur поля name
* На onclick кнопки отправки вешается request.registration
* Также ненадо забывать о том что JS код пишется лишь для удобства пользователя
* и все данные необходимо перепроверять на сервере
* Если возникнут какието вопросы - мне в ПМ или в скайп alexwindhope
*/

// Создаем XMLRequest

var request = new XMLHttpRequest();
//Функция отправки формы
request.registration = function () {
if(this.error !== undefined && this.error === false ) {
this.open("POST", "http://domen/php_script_path.php", true);
//Передаем серверу заголовок отправки формы
this.setRequestHeader ("Content-Type","application/x-www-form-urlencoded");
this.send("user="+value);
}
else {
//Ошибка, тут тоже можем какнить об этом сообщить пользователю :)
}
}

request.onreadystatechange = function () {
if(this.readyState == 4 && this.status == 200) {
document.location.href = "itest1.ru/user/" + this.user;
}
}

function nameValidation() {
var rules = {
'min':3, //Минимальная длина имени
'max':25, //Максимальная длина
'preg':/^[a-zA-Z0-9_]+$/ //Регулярка
}
//Проверяем не слишком ли короткое имя :)
if(this.value.length < rules.min) {
//Ошибка
request.error = true;
return;
}
//А теперь не слишком ли оно длинное
if(this.value.length > rules.max) {
//Ошибка
request.error = true;
return;
}
// и увенчаем это все проверкой регулярным выражением
if(rules.preg.test(this.value) === false) {
//Ошибка
request.error = true;
return;
}
request.error = false;
request.user = this.value;
//Собстно все ок :)
}
</script>

Спустя 57 минут, 49 секунд (21.08.2011 - 14:24) 5maks5 написал(а):
Не получается применить. Может я как-то не так вызываю.
<input type="text" id="name" onblur="nameValidation">
<button
onclick="request.registration">send</button>

Спустя 9 минут, 11 секунд (21.08.2011 - 14:33) AlexWindHope написал(а):
Цитата (5maks5 @ 21.08.2011 - 11:24)
Не получается применить. Может я как-то не так вызываю.
<input type="text" id="name" onblur="nameValidation">
<button
onclick="request.registration">send</button>

Попробуйте так :)

<input type="text" id="name" onblur="javascript:nameValidation()">
<button
onclick="javascript:request.registration()">send</button>

PS:я код не тестировал чисто накидал. не исключено что где-то есть небольшая ошибка.
И как я писал выше - можете писать в скайп разберемся

Спустя 1 минута, 2 секунды (21.08.2011 - 14:34) 5maks5 написал(а):
Не работает smile.gif

Спустя 10 минут, 9 секунд (21.08.2011 - 14:44) AlexWindHope написал(а):
Цитата (5maks5 @ 21.08.2011 - 11:34)
Не работает :)

Ну неужели так тяжело посидеть и поправить пару строчек?

<script type="text/javascript">
/*
* Функция nameValidation вешается на onblur поля name
* На onclick кнопки отправки вешается request.registration
* Также ненадо забывать о том что JS код пишется лишь для удобства пользователя
* и все данные необходимо перепроверять на сервере
* Если возникнут какието вопросы - мне в ПМ или в скайп alexwindhope
*/

// Создаем XMLRequest

var request = new XMLHttpRequest();
//Функция отправки формы
request.registration = function () {
this.user = document.getElementById('name').value;
if(this.error !== undefined && this.error === false ) {
this.open("POST", "http://domen/php_script_path.php", true);
//Передаем серверу заголовок отправки формы
this.setRequestHeader ("Content-Type","application/x-www-form-urlencoded");
this.send("user="+this.user);
}
else {
//Ошибка, тут тоже можем какнить об этом сообщить пользователю :)
}
}

request.onreadystatechange = function () {
if(this.readyState == 4 && this.status == 200) {
document.location.href = "itest1.ru/user/" + this.user;
}
}

function nameValidation() {
var rules = {
'min':3, //Минимальная длина имени
'max':25, //Максимальная длина
'preg':/^[a-zA-Z0-9_]+$/ //Регулярка
}
//Проверяем не слишком ли короткое имя :)
if(this.value.length < rules.min) {
//Ошибка
request.error = true;
return;
}
//А теперь не слишком ли оно длинное
if(this.value.length > rules.max) {
//Ошибка
request.error = true;
return;
}
// и увенчаем это все проверкой регулярным выражением
if(rules.preg.test(this.value) === false) {
//Ошибка
request.error = true;
return;
}
request.error = false;
request.user = this.value;
//Собстно все ок :)
}
onload = function() {
document.getElementById('name').onblur = nameValidation;
}
</script>
<
input type="text" id="name">
<
button onclick="request.registration()">

Этот точно работает. Учите javascript ;)

Спустя 3 минуты, 42 секунды (21.08.2011 - 14:48) 5maks5 написал(а):
Я сразу предупредил что я в js 0.
Странно... Но и этот код у меня не работает.

Спустя 11 минут, 16 секунд (21.08.2011 - 14:59) AlexWindHope написал(а):
И каким образом вы проверяли?
Вообщем еще раз отвечаю сдесь - если Вы так и не асилите то пишите в скайп, проблема уже полностью решена и тестирована выше.

Спустя 1 минута, 56 секунд (21.08.2011 - 15:01) 5maks5 написал(а):
Как? Вставил в файл. Подключил библиотеку. Закрыл теги. Запустил. При нажатии на кнопку 0 реакций.

Спустя 7 минут, 46 секунд (21.08.2011 - 15:09) AlexWindHope написал(а):
Вы вообще логику скрипта просматривали?
О мой бог - 5maks5 вы страшный человек

ВО первых - если тупо вставить код, загрузить страницу и сразу же долбать кнопку - отправка действительно не произойдет т.к. в ОБРАБОТЧИКЕ свойство обьекта request.error будет = TRUE, а значит отправка на сервер не проиходит!

В коде где прописано http://domen/php_script_path.php вы должны прописать адрес к Вашему php обработчику
В коде где стоят комментарии //Ошибка вы должны сами писать вывод ошибки

Кстати по поводу библиотеки... Это JQuery типа? laugh.gif
Тут чистый JS никакая библиотека не нужна каГбы
PS:если реально хотите разобраться как все это работает пишите, а лучше - звоните в скайп, на форуме продолжать обсуждение не вижу смысла в веду ваших 0ых знаний smile.gif

Спустя 16 минут, 41 секунда (21.08.2011 - 15:25) 5maks5 написал(а):
Подскажите что писать в обработчике, дальше сам курить буду. smile.gif

Спустя 2 минуты, 23 секунды (21.08.2011 - 15:28) quickxyan написал(а):
AlexWindHope
вижу так и хочеться пообщаться? )))

Спустя 14 минут, 30 секунд (21.08.2011 - 15:42) AlexWindHope написал(а):
Цитата (5maks5 @ 21.08.2011 - 12:25)
Подскажите что писать в обработчике, дальше сам курить буду. :)

Откудого я знаю как вы собираетесь выводить ошибки?
ну например создаете какойто html элемент, допустим

<span id="name_help"></span>

В начале тела функции userValidation выбираем элемент по его id

var help = document.getElementById('name_help');

Теперь на каждую ошибку (если имя больше максимального, меньше минимального значения или не проходит по регулярке) выдаем в наш help текст ошибки
например:

if(this.value < rules.min) {
//Запихиваем в наш span текст ошибки
help.innerHTML = "Минимальная длина поля логин " + rules.max;
//Покрасим красным
help.style.color = "red";
//Ну и не трогать тот код что уже есть а именно
request.error = true;
//просто оставляешь
}

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

Если валидация пройдена успешно

help.innerHTML = "Валидное имя";
help.style.color = "green"
//ну и как раньше код касающийся request.error - не трогаем

Теперь немного вообще о том как всен это работает, т.к. как я понял ты этого вообще не понимаешь...
После ввода значения в поле input ты должен убрать из него фокус чтобы отработало событие onblur.
Хотя в данном примере это не совсем удобно - обычно подобные вещи делаются именно на событии onblur.
щас тупо просто пропиши путь нормальный к своему скрипту, напиши обработчики (сам скрипт можешь втупую пустым оставить - JS отработает т.к. он не смотрит результат выполнения php скрипта)

PS: в дальнейшем вопросы подобного характера задавайте (коль скайпом пользоваться, как я понял - религия не позволяет) в ПМ чтомы не захломлять форум... Удачи :)
----------------------------------------------------------------------


quickxyan
Нет, помощь новичкам банально повышает квалификацию


 ! 

М
Запрещено публичное обсуждение действий модераторов. Изучайте правила.
inpost

Спустя 2 минуты, 8 секунд (21.08.2011 - 15:44) 5maks5 написал(а):
Скайп есть, но нет желания его использовать в данный момент.
Спасибо на этом.

Спустя 7 часов, 4 минуты, 48 секунд (21.08.2011 - 22:49) Guest написал(а):
вы по моему пытаетесь изобрести велосипед
особенно вот это
<script type="text/javascript" src="js/jquery.js"></script>
и следом
var text = document.getElementById('name').value;
зачем тогда jquery подключали?

не особо понимаю что ты хочешь сделать
но как-то так.
<script type="text/javascript" src="js/jquery.js"></script>
<
script type="text/javascript">
$('form').submit(function(){
$.post(test.php,{name : $('input[type=name]')},function(res){
if (res[0].length > 0)
alert (res[0]);
})
},"json");
</
script>

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

просто так, без пхп файла это работать и не будет.

ps писал на коленке, без тестов, поэтому возможны какие-то ошибки

Спустя 2 минуты, 49 секунд (21.08.2011 - 22:52) Guest написал(а):
ой блин ошибся как и думал
эта строчка
$.post(test.php,{name : $('input[type=name]')},function(res){

должна выглядеть так
$.post(test.php,{name : $('input[type=name].val()')},function(res){

Спустя 1 минута, 9 секунд (21.08.2011 - 22:53) Guest написал(а):
блин надо региться... а то редактировать не могу, простите за спам.
$.post(test.php,{name : $('input[type=name]').val()},function(res){

Спустя 23 минуты, 20 секунд (21.08.2011 - 23:16) quickxyan написал(а):
Guest
Цитата (Guest @ 21.08.2011 - 19:49)
особенно вот это
<script type="text/javascript" src="js/jquery.js"></script>
и следом
var text = document.getElementById('name').value;

smile.gif мои знания jquery как раз и ограничиваються тем, чтобы пользоваться аяксом так как на чистом js не пойму как там все работает smile.gif надо маны читать, а все никак не соберусь

Спустя 4 минуты, 49 секунд (21.08.2011 - 23:21) inpost написал(а):
quickxyan
У меня это заняло пол ночи, чтобы сделать на JS парочку Ajax-запросов. Ты же должен понимать, тебе это в любом случае надо, это основа основ, так почему с этим тянуть, когда можно сделать прямо сегодня-завтра?! smile.gif

Спустя 2 минуты, 4 секунды (21.08.2011 - 23:23) quickxyan написал(а):
inpost
в том то и дело, что понимаю, а поделать ничего не могу. да наверное как-то сяду и выучу, а сейчас надо идти спать - завтра рано вставать.


_____________
Где исходники вселенной?
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.