1

В общем, я, как начинающий, решил сделать ajax на чистом js. Но никак не могу передать переменную из Select в php. Там ее обработать и вывести значение из php в div.

<script>
  var select = document.querySelector('select');
var a = select.options[select.selectedIndex].value;

var php = document.querySelector('#php');
var xhr = new XMLHttpRequest();
xhr.open('GET', 'from-js.php?menu=' + a, true);
xhr.send();
select.onchange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      php.innerHTML = xhr.response;
      php.style.border = '5px solid green';
    } else {
      php.innerHTML = 'Где-то ошибка...';
      php.style.border = '5px solid red';
    }
  } 
</script>
<body>
  <p><select name="menu"><?php for($i = 0; $i < 11; $i++){echo '<option>' . $i . '</option>';} ?></select></p>
  <div id="php">
    Здесь что-то поменяется...
  </div>
</body>



<?php

if(isset($_GET['menu'])){;
    echo ($_GET['menu'] + 100);
}
else{
    echo 'Ой...';
    print_r($_REQUEST);
}
?>

Пытаюсь вывести переменную "a" в консоль - консоль отвечает "0", даже если значения меняются. Почему так?

1 ответ 1

2

Наверное потому, что вы только в самом начале выбрали значение var a = select.options[select.selectedIndex].value; и все. А надо его брать каждый раз при onchange.. Аналогично с запуском ajax. Более правильный вариант:

var select = document.querySelector('select');
var php = document.querySelector('#php');

select.onchange = function() {  
    var a = select.options[select.selectedIndex].value;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'get.php?menu=' + a, true);
    xhr.send(); 
    xhr.onreadystatechange = function() {   
      if (xhr.readyState != 4) 
        return;

      if (xhr.status == 200) {
        php.innerHTML = xhr.response;
        php.style.border = '5px solid green';
      } else {
         php.innerHTML = 'Где-то ошибка...';
        php.style.border = '5px solid red';
      }

    }
} 

php

if(isset($_GET['menu'])){;
    echo ((int)$_GET['menu'] + 100);
    exit;
}
else{
    echo 'Ой...';
    print_r($_REQUEST);
}

html

<p>
    <select name="menu">
    <?php for($i = 0; $i < 11; $i++) {
        echo '<option value="'.$i.'">' . $i . '</option>';
    } ?>
    </select>
</p>

<div id="php">
    Здесь что-то поменяется...
</div>    

Метод fetch: замена XMLHttpRequest:

var select = document.querySelector('select');
var php = document.querySelector('#php');

select.onchange = function() {  
    var a = select.options[select.selectedIndex].value;

    fetch('get.php?menu=' + a).then(function(response) {
        if (response.status != 200) {
            php.innerHTML = 'Где-то ошибка...';
            php.style.border = '5px solid red';
        }       

        return response.text();
    }).then(function(response) {        
        php.innerHTML = response;
        php.style.border = '5px solid green';
    }); 
} 
5
  • Получается, переменная "a" станет вне видимости xhr.open('GET', 'from-js.php?menu=' + a, true)... 9 дек 2017 в 11:11
  • @forever_young ну запуск ajax аналогично происходит единожды, а не каждый раз при onchange. Так что логично его также поместить внутрь....добавил пример 9 дек 2017 в 11:24
  • @forever_young а, и да, в option надо добавить value 9 дек 2017 в 11:33
  • Точно, option и value я забыл. Спасибо! И спасибо за помощь, заработало. Что возвращается, когда пишут "return;"? Я ранее видел, что так пишут, но никогда не знал почему. 9 дек 2017 в 12:10
  • @forever_young значит дальнейший код обрабатывать не надо, т.е. прервать исполнение и выйти 9 дек 2017 в 12:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.