VPF::По событию onchange отправить данные на сервер

Marlik

Дата 29.9.2013, 20:24 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 212
Регистрация: 25.2.2007
Где: Рязань

Репутация: нет
Всего: нет

Доброго времени суток. Есть форма регистрации, выводится с помощью шаблонов скриптом на Perl. Отправка данных осуществляется обычным GET запросом. Есть такая задача вставить туда пару полей, а именно поле для вывода страны проживания, и поле в которое потом нужно из базы подгрузить города. Я так понимаю нужно по событию OnChange(); передать параметр id страны в javascript, оттуда сделать запрос на сервер и получив ответ разместить его во втором поле города.

Код


<select name="country" id="country" onchange="city_required(this, #city)">
        <option value=1  selected='selected'>Россия</option>
        <option value=19>Австралия</option>
        <option value=20>Австрия</option>
        <option value=5>Азербайджан</option>
          ...
</select>

Код


  <select name="city" id="city">
 <option value="">   </option>
</select>

Вопрос, правильно-ли делаю? Есть ли готовые образцы реализации? В javascript не силен, буду признателен за любую помощь. Спасибо.

akizelokro

Дата 30.9.2013, 22:42 (ссылка)

(нет голосов)

Загрузка ...

Крокодил

Профиль
Группа: Участник
Сообщений: 761
Регистрация: 30.7.2007

Репутация: 2
Всего: 5

ajax-запросы посмотри
И готовые образцы где-то должны быть

--------------------

a = a + b; b = a - b; a = a - b;

Marlik

Дата 30.9.2013, 22:57 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 212
Регистрация: 25.2.2007
Где: Рязань

Репутация: нет
Всего: нет

Да я так в принципе и думал. В ajax и javascript не бум-бум... Кто-бы поделился реализацией... спасибо.

RBW

Дата 1.10.2013, 07:58 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 10
Регистрация: 29.9.2013

Репутация: нет
Всего: нет

1. Подключаешь jQuery

2. HTML:

Код


<select name="country" id="country">
        <option value=0>Выберите страну</option>
        <option value=1>Россия</option>
        <option value=19>Австралия</option>
        <option value=20>Австрия</option>
        <option value=5>Азербайджан</option>
</select>

 <select name="city" id="city">
</select>

3. JS:

Код


$('#country').change(function(){
    // Сохраняем выбранную страну
    var country = $(this).val()   
    
    // Отправляем запрос
    var request = $.ajax({
      // Скрипт обработчик, должен вернуть по страние список городов в JSON  
      url: "script.php",
      // Тип запроса
      type: "GET",
      // Параметры запроса
      data: { country : country }
    });
    
    // Код, выполняемый после ответа от сервера
    request.done(function( msg ) {
      // Разбор JSON ответа от сервера
      var response   = JSON.parse(msg)
      // Сохранение элемента - списка выбора города
      var cityEl     = $('#city')
      // Очистка списка от текущих значений
      cityEl.empty()
      
      // Добавление городов
      $.each(response, function(){
         cityEl.append('<option>' + $(this) + '</option>')              
      })
    });
 
})

Вот тут http://jsfiddle.net/m9Ut5/ полу-живой пример smile

Нужно подставить адекватный скрипт, который отдает города

Это сообщение отредактировал(а) RBW - 1.10.2013, 07:59

Marlik

Дата 1.10.2013, 13:10 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 212
Регистрация: 25.2.2007
Где: Рязань

Репутация: нет
Всего: нет

Вот спасибо! Я в принципе нашел какой-то левый скрипт, из него значения value не передаются, только имя селекта. Щас буду тестировать...

Это сообщение отредактировал(а) Marlik - 1.10.2013, 14:28

Marlik

Дата 2.10.2013, 10:21 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 212
Регистрация: 25.2.2007
Где: Рязань

Репутация: нет
Всего: нет

Не, не работает. ))) В общих чертах, либо cgi-скрипт мой не отгружает, или jquery косячит. Как проверить? Вот до этой строки мой скрипт работает 100%.

Код


print $cgi->header(-type => "application/json", -charset => "utf-8");     # Устанавливаю заголовок
print $hash_ref;                                                                                               #  Возвращаю данные закодированные в json

Marlik

Дата 2.10.2013, 14:57 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 212
Регистрация: 25.2.2007
Где: Рязань

Репутация: нет
Всего: нет

Может alert где воткнуть? Что-бы проверить? А jquery какую версию подключить???

Marlik

Дата 3.10.2013, 07:42 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 212
Регистрация: 25.2.2007
Где: Рязань

Репутация: нет
Всего: нет

Фуууу... кажись вернулся JSON в jquery... не выводит правда но уже легче.... У меня кривая кодировка в базе и соответственно отдаются вопросики вместо данных... может поэтому парсер ругается?

Marlik

Дата 3.10.2013, 08:48 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 212
Регистрация: 25.2.2007
Где: Рязань

Репутация: нет
Всего: нет

Кажется нашел в чем косяк. JSON возвращает id области и имя области.

Вот так я получил объект:

Код


var response    =JSON.stringify(msg)
response        =JSON.parse(response)

Теперь бы выдернуть из него данные и вывести их.

Люди, кто соображает выручайте! )))

Это сообщение отредактировал(а) Marlik - 3.10.2013, 10:32

Marlik

Дата 3.10.2013, 13:30 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 212
Регистрация: 25.2.2007
Где: Рязань

Репутация: нет
Всего: нет

Хрень какая-то! Вот так пробую получаю вывод во второй селект:

Код


var response    =JSON.stringify(msg)
response        =JSON.parse(response)

Код


[object : Object]
[object : Object]
[object : Object]
[object : Object]

А вот так:

Код


var response        =JSON.parse(response)

Ничего не получаю во втором селекте. Народ, подскажите куда копать-то? Как будто все вымерли.... )))

kin

Дата 3.10.2013, 13:35 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 204
Регистрация: 9.5.2008

Репутация: 2
Всего: 6

Привет!
Без обид, но такое ощущение, что Вы пытаетесь копать грядки для посадки огурцов карьерным экскаватором... Может просто ограничиться обычным xmlhttprequest?. Если правильно понял задачу, то в событии onchange Вы формируете запрос, отправляете серверу, который возвращает ответ, который разбираете и заполняете поле "город".
Нужно ли ради 30 - 50 строк кода цеплять библиотеку весом более 200К?

Добавлено @ 13:47

Цитата(Marlik @ 3.10.2013, 13:30

)

Ничего не получаю во втором селекте. Народ, подскажите куда копать-то? Как будто все вымерли.... )))

У объекта Select есть свойсто - коллекция options. Эта коллекция имеет метод Add, используйте его, например вот так:

Код


<script>
// oSelect - объект SELECT

var oOption = document.createElement("OPTION");
oOption.innerText = "Two";
oOption.value = "2";
oSelect.options.add(oOption);
</SCRIPT>

Это сообщение отредактировал(а) kin - 3.10.2013, 14:00

Marlik

Дата 3.10.2013, 14:22 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 212
Регистрация: 25.2.2007
Где: Рязань

Репутация: нет
Всего: нет

За ссылочку спасибо. Криз какой-то по ключевым словам - "как распарсить json" А что, разве нужно писать 50 строк кода чтобы распарсить json? Мне осталось-то до победного конца чуть-чуть.... )))) В вашем куске кода, я нифига не понял... ))) Мы и друг друга не поняли наверное... ))) У гугля наверное истерика уже, когда я набираю... Мне бы пример нормальный, что-бы понятно откеда плясать.... Но все-равно спасибо.

kin

Дата 3.10.2013, 15:49 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 204
Регистрация: 9.5.2008

Репутация: 2
Всего: 6

Цитата(Marlik @ 3.10.2013, 14:22

)

В вашем куске кода, я нифига не понял...

К сожалению, я не знаю в какой форме у Вас приходит ответ от сервера..., в любом случае - это строка, а далее - куча вариантов, например: получить массив с названием городов при помощи JSON.parse, или функции split("разделитель") объекта String , или резать строку, каким-либо другим способом...
После того, как получили список городов, для каждого города, создаем объект OPTION,

Код


var oOption = document.createElement("OPTION");

устанавливаются его свойства:

Код


oOption.innerText = "Название города";
oOption.value = "Код города, или еще что-то";

и добавляем его в коллекцию

Код


oSelect.options.add(oOption);

и соответственно, это все крутится в цикле.
Как пример:

Код


function Func1(arg) 
{
// arg  - строка вида "Москва;Киев;Ашхабад;Нижние Пупки;Верхние Пятки"
    var _source = arg.split(";") // получаем массив элементов из arg

    var _templ = document.getElementById("id selectа"); //select с городами    
    _templ.innerHTML = "" //не самый хороший способ очистки коллекции options  :)
   
   var e = null;
    for (var _i in _source) 
   {
         e = document.createElement("option");
         e.value = _source[_i];
         e.text = _source[_i];
          _templ.options.add(e);
    }
}

Это сообщение отредактировал(а) kin - 3.10.2013, 16:02

Marlik

Дата 3.10.2013, 16:13 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 212
Регистрация: 25.2.2007
Где: Рязань

Репутация: нет
Всего: нет

Данные приходят в json формате. Вижу в отладчике. Образец:

Код


{ 34: "?????? ?????", ... }

Вопросики, я так понимаю кривая кодировка, и наверное не влияет на вывод(я так думаю).

А вот во втором селекте, на странице вылазиет такая хрень:

[object:Object]

И что это такое я не врублюсь. Тем более первый раз в жизни мне пришлось столкнутся с javascript-ами... Куда рыть я еще не понял что читать тоже....

kin

Дата 3.10.2013, 16:34 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 204
Регистрация: 9.5.2008

Репутация: 2
Всего: 6

Цитата(Marlik @ 3.10.2013, 16:13

)

Данные приходят в json формате. Вижу в отладчике. Образец:
{ 34: "?????? ?????", ... }

Свой код

Код


var response    =JSON.stringify(msg)
response        =JSON.parse(response)

замените на

Код


var response =JSON.parse(msg)

После этого в отладчике посмотрите содержимое объекта response
Скорее всего это будет асоциативный массив вида [ключ:значение]. В данном примере 34 это ключ, а ????? - значение, а все вместе это объект, браузер это и показывает.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »