Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> По событию onchange отправить данные на сервер, Не могу отправить на сервер данные. 
V
    Опции темы
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 не силен, буду признателен за любую помощь. Спасибо. 

PM WWW Skype   Вверх
akizelokro
Дата 30.9.2013, 22:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Крокодил
**


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

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



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


--------------------
a = a + b; b = a - b; a = a - b;
PM MAIL   Вверх
Marlik
Дата 30.9.2013, 22:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Да я так в принципе и думал. В ajax и javascript не бум-бум... Кто-бы поделился реализацией... спасибо.
PM WWW Skype   Вверх
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
PM MAIL   Вверх
Marlik
Дата 1.10.2013, 13:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



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



Это сообщение отредактировал(а) Marlik - 1.10.2013, 14:28
PM WWW Skype   Вверх
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



PM WWW Skype   Вверх
Marlik
Дата 2.10.2013, 14:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Может alert где воткнуть? Что-бы проверить? А jquery какую версию подключить???
PM WWW Skype   Вверх
Marlik
Дата 3.10.2013, 07:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Фуууу... кажись вернулся JSON в jquery... не выводит правда но уже легче.... У меня кривая кодировка в базе и соответственно отдаются вопросики вместо данных... может поэтому парсер ругается?
PM WWW Skype   Вверх
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
PM WWW Skype   Вверх
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)


Ничего не получаю во втором селекте. Народ, подскажите куда копать-то? Как будто все вымерли.... )))
PM WWW Skype   Вверх
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
PM MAIL   Вверх
Marlik
Дата 3.10.2013, 14:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



За ссылочку спасибо. Криз какой-то по ключевым словам - "как распарсить json" А что, разве нужно писать 50 строк кода чтобы распарсить json? Мне осталось-то до победного конца чуть-чуть.... )))) В вашем куске кода, я нифига не понял... ))) Мы и друг друга не поняли наверное... ))) У гугля наверное истерика уже, когда я набираю... Мне бы пример нормальный, что-бы понятно откеда плясать.... Но все-равно спасибо.
PM WWW Skype   Вверх
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
PM MAIL   Вверх
Marlik
Дата 3.10.2013, 16:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



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

Код

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


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

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

[object:Object] 

И что это такое я не врублюсь. Тем более первый раз в жизни мне пришлось столкнутся с javascript-ами... Куда рыть я еще не понял что читать тоже.... 
PM WWW Skype   Вверх
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 это ключ, а ????? - значение, а все вместе  это объект, браузер это и показывает. 



PM MAIL   Вверх
Marlik
Дата 3.10.2013, 16:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Цитата(kin @ 3.10.2013,  16:34)
Цитата(Marlik @  3.10.2013,  16:13 Найти цитируемый пост)
Данные приходят в json формате. Вижу в отладчике. Образец:
{ 34: "?????? ?????", ... }
Свой код
Код

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

замените на
Код

var response =JSON.parse(msg)

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

Ну так он что так, что так - ассоциативный массив. Только без stringify во второй селект ничего не попадает... и дальше попробовать ваш код воткнуть? Я уже нагуглился так что тошно... и допер что это обьект, только проблема в том что из обьекта дергать в теории можно, а в моем случае никак... ))) 

Например:

Код

var user = {
  name: "Вася",
  age: 25
};
 
var str = JSON.stringify(user, function(key, value) {
  if (key == 'бла-бла') return undefined;
  return value;
} );
 
alert(str); // {"name":"Вася","age":25}


А как мне выдернуть из обьекта ключ и содержимое? Вопрос еще тот...
PM WWW Skype   Вверх
kin
Дата 3.10.2013, 19:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Цитата(Marlik @  3.10.2013,  16:49 Найти цитируемый пост)
Только без stringify во второй селект ничего не попадает... 
 Во-первых, что приходит с сервера? Если я правильно понял, то это данные в ФОРМАТЕ JSON. А теперь попробуйте мне объяснить с какого перепуга, Вы решили, что нужно использовать метод JSON.stringify, в  описании которого говорится,  что он  преобразовывает («сериализует») значение в JSON-строку
Во-вторых:
Цитата(Marlik @  3.10.2013,  16:49 Найти цитируемый пост)
А как мне выдернуть из обьекта ключ и содержимое? Вопрос еще тот... 
Легко!
Код

   for (var key in response)
       alert(key+"="+response[key]);

Смысл кода, думаю, понятен без комментариев..., добавьте в цикл код, котрый создает объекты OPTION и получите то, что Вам нужно...


Это сообщение отредактировал(а) kin - 3.10.2013, 19:37
PM MAIL   Вверх
Marlik
Дата 4.10.2013, 08:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



К сожалению ваша конструкция не работает, то есть просто ничего не происходит. Я кстати просто ради экспериента вставил JSON.stringify подумал что вдруг данные все-таки не в json формате приходят, и с такой строкой кстати хоть что-то появлялось в селекткте. Получается наверное так, я получаю объект, в котором неизвестны ни ключ, ни значение. Вот сейчас как у меня все выглядит:

Код

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
$(function(){

$('#country').change(function(){
   
    var country = $(this).val()   
    
    var request = $.ajax({

      url: "./cgi-bin/city.cgi",

      type: "GET",

      data: { country : country },

    });
    
    request.done(function( msg ) {

    var response        =JSON.parse(msg)

      var cityEl     = $('#state')
    
      cityEl.empty()
      
      $.each(response, function(){

         cityEl.append('<option>' + $(this) + '</option>')              
     

 })
    });
 
})


}); 
</script>




Код

<div>
<div id="first">
    <select name="country" id="country">
    <option value="">Выберите страну &raquo;</option>
      <option value="1">Россия</option>                                            
          <option value="2">Украина</option>                                           
          <option value="3">Абхазия</option>                                           
          <option value="4">Австралия</option>                                         
          <option value="5">Австрия</option>                                           
          <option value="6">Азербайджан</option>                                       
          <option value="7">Албания</option>                                           
          <option value="8">Алжир</option>                                             
          <option value="9">Ангола</option>        
</select>
</div>
<div id="second">
    <select name="state" id="state">
    <option value="">Выберите область &raquo;</option>
    </select>
</div>    
<div id="three">
    <select name="town" id="town">
    <option value="">Выберите город &raquo;</option>
    </select>
</div>    
</div>



Интересно... почему в этой строке синтаксическую ошибку выдает:

Код

var response   = JSON.parse(msg)


Uncaught SyntaxError: Unexpected token o reg.html:34 (anonymous function)



Это сообщение отредактировал(а) Marlik - 4.10.2013, 10:40
PM WWW Skype   Вверх
Marlik
Дата 4.10.2013, 11:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Убрал эту строку и все заработало:

Код

var response   = JSON.parse(msg)


Сделал так(Не знаю правильно-ли?):

Код

var response  = (msg)


И все заработало!

Окончательный скрипт выглядит так:

Код

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

$('#country').change(function(){
   
    var country = $(this).val()   
    
    var request = $.ajax({
      url: "./cgi-bin/city.cgi",
      type: "GET",
      dataType : "json",
      data: { country : country }
    });
    
    request.done(function( msg ) {

    var response = msg 
    
      var cityEl     = $('#state')
      cityEl.empty()
      
      $.each(response, function(){
      
       for (var key in response)
   
      townEl.append('<option value='+ key + '>' + response[key] + '</option>')        
     
})
   });
 
      })

        }); 

</script>



Вот cgi скрипт написан на perl, вдруг кому надо:

Код

#!/usr/bin/perl -w
    $| = 1;
    use strict;
    use CGI;.....
    use DBI;
    use JSON::PP;

    my $cgi = new CGI;
....
    my %part;
    my $hash_ref = \%part;
    my $state = $cgi->param( 'country' );

    my $db = 'База';
    my $host = 'localhost';
    my $user = 'marlik';
    my $passwd = '**********';

    my $dbh = DBI->connect("DBI:mysql:$db:$host", $user, $passwd) || die "$!";
    my $sth=$dbh->prepare("select id_region, name from region where id_country='$state'");
    $sth->execute;........
<------>....
    while(my($key, $value) = $sth->fetchrow()){
    $part{$key} = "$value";
}
    $sth->finish;
    $dbh->disconnect;
...
    $hash_ref = encode_json $hash_ref;

    print $cgi->header(-type => "application/json", -charset => "utf-8");
    print "$hash_ref";
.....
    exit();




Спасибо kin, за поддержку.



Это сообщение отредактировал(а) Marlik - 6.10.2013, 15:06
PM WWW Skype   Вверх
Marlik
Дата 4.10.2013, 16:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Нифига не работает правильно... вместо ключа вставляет слово key

Вот тут.

Код

 $.each(response, function(){
 
       for (var key in response){
      
        townEl.append('<option value='+ key + '>' + response[key] + '</option>')              
     }
})


Как вставить ключ? Хэлп!!!

И по моему криво написано, получается внутри цикла запустил еще один. Переписал так:


Код

 $.each(response, function(name, value){    

 townEl.append('<option value='+ name + '>' + value + '</option>')              
  
})







Это сообщение отредактировал(а) Marlik - 5.10.2013, 03:31
PM WWW Skype   Вверх
Marlik
Дата 6.10.2013, 15:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

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



Вопрос решен, переделал так и заработало:

Код
   
    for (var key in response){
   
      cityEl.append('<option value=' + key + '>' + response[key] + '</option>')              
     
}



Всем кто помогал, спасибо.
PM WWW Skype   Вверх
Страницы: (2) [Все] 1 2 
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.1009 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.