Получение значения из javascript и отправка его в php-скрипт с помощью ajax

Я хотел бы использовать apache2 и php для своего веб-сервера raspberry pi, поскольку у меня уже есть много файлов php, которые я могу использовать. Все установлено и работает, но теперь мне нужно сделать асинхронный запрос к моей малине: Когда я перемещаю слайдер на своем веб-сайте, не обновляя страницу, я хочу отправить новое значение в скрипт php / python.

конструкция внутри:

 /var/www/html/SCRIPTS     (php/python scripts)
 /var/www/html/WEB         (web interface)
 /var/www/html             (an index that redirects inside WEB folder)

Мой индексный файл содержит следующий код. У меня есть CSS для создания трех ползунков. Когда 'oninput' я хотел бы вызвать скрипт, который отправляет строку на сервер. Скрипт содержит функцию edited ();

    <title>JMT Botler 1: admin panel</title>

 <style type="text/css">
  .slidecontainer {
    width: 100%; /* Width of the outside container */
  }
  .slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
  }
 </style>
        <script type="text/javascript">
          function edited(str) {
              var xmlhttp = new XMLHttpRequest();
              xmlhttp.onreadystatechange = function() {
              if (this.readyState == 4 && this.status == 200) {
                document.getElementById("demo").innerHTML = this.responseText;
              }
            };
          xmlhttp.open('GET', '/var/www/html/SCRIPTS/test_rec.php?v=' + str, true);
          xmlhttp.send();
          }
        }
      </script>

  </head>
  <body>

       <div align="center">
         <p>STEERING</p>
       </div>
       <div class="slidecontainer">
         <input type="range" min="1" max="179" value="90" class="slider" onchange="edited(this.value)" id="myRange" width="500">
       </div>
       <div align="center">
         <p>Value: <span id="steering">-1</span></p>
       </div>

       <div align="center">
         <p>THROTTLE</p>
       </div>
       <div class="slidecontainer">
         <input type="range" min="1" max="179" value="90" class="slider" id="myRange2" width="500">
       </div>
       <div align="center">
         <p>Value: <span id="throttle">90</span></p>
       </div>

       <div align="center">
         <p>STER OPT</p>
       </div>
       <div class="slidecontainer">
         <input type="range" min="1" max="179" value="90" class="slider" id="myRange3" width="500">
       </div>
       <div align="center">
         <p>Value: <span id="steropt">90</span></p>
       </div>

      <div align="center">
         <p>Value: <span id="demo"></span></p>
       </div>



    <script type="text/javascript">
      var slider = document.getElementById('myRange');
      var output = document.getElementById('steering');
      var slider2 = document.getElementById('myRange2');
      var output2 = document.getElementById('throttle');
      var slider3 = document.getElementById('myRange3');
      var output3 = document.getElementById('steropt');
      var vs = slider.value;
      var vt = slider2.value;
      var so = slider3.value;
      output.innerHTML = slider.value;
      output2.innerHTML = slider2.value;
      output3.innerHTML = slider3.value;
      slider.oninput = function() {
        steering.innerHTML = slider.value - 90;
        edited("OPT");
      }
      slider2.oninput = function() {
        throttle.innerHTML = slider2.value - 90;
        edited("OPT");
      }
      slider3.oninput = function() {
        steropt.innerHTML = slider3.value - 90;
        edited("OPT");
      }
    </script>      
 </body></html>

Наконец, php-скрипт, который получает строку, должен записать ее в документ. Очевидно, это не работает. Я впервые строю что-то подобное. Насколько я отклонился от курса?

 <?php
  $ric=$_GET['v'];
  $my_file = 'log.txt';
  $handle = fopen($my_file, 'a+');
  $data = 'NUOVO DATO RICEVUTO';
  fwrite($handle, $data);
  $new_data = "\n".$ric;
  fwrite($handle, $new_data);
 ?>

Заранее спасибо!

0
0
42
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, что проблема кроется в этой строке:

xmlhttp.open('GET', '/var/www/html/SCRIPTS/test_rec.php?v=' + str, true);

Вы уверены, что этот запрос правильный? Обычно /var/www/html находится вне корневого каталога документов VirtualHost. Попробуйте изменить это с помощью:

xmlhttp.open('GET', '/SCRIPTS/test_rec.php?v=' + str, true);

Также третий параметр openустарела.

Большое спасибо, я меньше чем новичок с js и ajax! Еще нашла в скрипте лишний} :)

TheKillerCH 13.09.2018 20:14

Другие вопросы по теме