Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как превратить велосипед в фотонный звездолёт (https://javascript.ru/forum/events/64372-kak-prevratit-velosiped-v-fotonnyjj-zvezdoljot.html)

avalan4e 06.08.2016 13:19

Как превратить велосипед в фотонный звездолёт
 
Приветствую, уважаемые коллеги. Поставил себе задачу: считывать данные формы, как только будут внесены изменения, затем обработать их на сервере и вернуть на страничку результат. Нагородил семнадцати колесный велосипед с треугольным парусом. Надел треуголку, а велосипед хоть и едет, но со скрежетом, и команда грозит поднять бунт и отправить меня прогуляться по рее на корм рыбам.
Если вкратце, то я считываю данные формы в режиме полёта (без сабмита и пр.), отправляю расчитывать на сервер, пишу в файл результат расчетов, читаю из файла полученный результат и вывожу его в необходимом блоке. Короче говоря, если бы я повстречал дьявола, то он бы попросил оставить автограф на сиськах.
Очень надеюсь, что существует более элегантное решение этой, как мне кажется, весьма тривиальной задачи. Надеюсь на вашу помощь.
var days = 3;
$('#days').change(function() {
  days = $(this).val();
})

var model;
$('#models [name="optradio"]').change(function() {
  model = $(this).val();

  var formData = new FormData();
  formData.append("type", type);
  formData.append("model", model);
  formData.append("days", days);
  // отослать
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "interactive.php");
  xhr.send(formData);
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      $('#vote_status').text(xhttp.responseText);
    }
    else {
      $('#vote_status').text('');
      req();
    }
  };

  function req() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      $('#vote_status').text(xhttp.responseText);
    }
    else {
      $('#vote_status').text('');
      req();
    }
  } 
    
  xhttp.open("GET", "INTERACTIVE_PRICE/INTERACTIVE_PRICE.txt", true);
  xhttp.send();
})

var type = "standart";
$('#types [name="optradio"]').change(function() {
  type = $(this).val();
})

laimas 06.08.2016 15:40

Цитата:

Сообщение от avalan4e
читаю из файла полученный результат и вывожу его в необходимом блоке

Зачем читать из файла, если интерпретатор все расчеты имеет?

Rise 06.08.2016 16:52

avalan4e, всё в кучу собрал и XMLHttpRequest и jQuery и onreadystatechange и formData, не делай так больше...

avalan4e 06.08.2016 17:13

laimas, как их извлечь? Может в каких-то глобальных переменных хранятся?

avalan4e 06.08.2016 17:17

Rise, хех, да уж. Собирал по сусекам сети варианты решения своей задачи. Вот такой коктейль (или скорее борщ) получился. Предложите вариант получше? Или может почитать что-то для более целостной картины восприятия посоветуете?

laimas 06.08.2016 17:23

Цитата:

Сообщение от avalan4e
как их извлечь?

Встречный вопрос - и кто же здесь отправляю расчитывать на сервер, пишу в файл результат расчетов считает? А если посчитал и записал в файл, то то что он пишет в файл разве нельзя вернуть и клиенту?

А насчет "винегрета из JS и JQ", так в в jQuery готовых методов Ajax хоть отбавляй.

Rise 06.08.2016 17:24

avalan4e, вам важна секретность формулы расчета?

avalan4e 06.08.2016 18:14

Rise,
Ради неё весь сыр-бор. Был вариант на jquery без привлечения внешних скриптов, который работал хорошо и быстро, но с одним недостатком -- view page source обнажает всю кухню.

Rise 06.08.2016 18:33

avalan4e, html разметка есть?

avalan4e 06.08.2016 18:46

Rise, собственно вот оно:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">


<h2>Выберите класс автомобиля</h2>
<form id="auto-class">
  <div class="checkbox">
    <label><input id="auto-class-econom" type="checkbox" value="econom-value" name="econom-checkbox">Эконом-класс</label>
  </div>
  <div class="checkbox auto-class-vip">
    <label><input id="auto-class-vip" type="checkbox" value="">Представительский класс (VIP)</label>
  </div>
</form>

<h2>Выберите тип аренды</h2>
<form name="chk" id="types">
  <div class="radio">
    <label><input id="standart" type="radio" name="optradio" value="standart" checked>Стандарт</label>
  </div>
  <div class="radio">
    <label><input id="wedding" type="radio" name="optradio" value="wedding">Автомобиль на свадьбу</label>
  </div>
</form>

<?
  $pricelist = array();
  $handle = @fopen("pricelist.txt", "r");
  if ($handle) {
      while (($buffer = fgets($handle, 4096)) !== false) {
        list($id, $auto, $price, $class) = explode(":", $buffer);
        $pricelist[$id] = array('class' => $class, 'price' => $price, 'auto' => $auto);
      }
      echo '<form name="tt" id="models">';
      foreach ($pricelist as $id => $value) {
        echo '<div class="radio '.$value["class"].' hidden">'.'
              <label><input type="radio" name="optradio" value="'.$id.'">';
              echo $value["auto"];
              echo " - ";
              echo $value["price"];
              echo " - ";
              echo $value["class"];
              echo '</label>
            </div>    
        ';
      }
      echo '</form>';
      if (!feof($handle)) {
          echo "Error: unexpected fgets() fail\n";
      }
      fclose($handle);
  }
?>
<input id="days" type="number" name="days" min="3" value="3"><br>
<button id="test-button"></button>

<div id="vote_status"></div>

Да, и по большому счету мне не столько нужна секретность формулы расчета, сколько относительная безопасность от внесения изменений в процессе выполнения. В вопросах безопасности я, конечно, полный профан, но что-то мне подсказывает, если оставить всю кухню на виду, то жди беды.


Часовой пояс GMT +3, время: 12:23.