Javascript, сгенерированный в PHP, не выполняется

Question

Я пытаюсь создать систему рулетки, которая должна работать следующим образом: пользователь нажимает кнопку «Отправить», которая затем проверяется в файле открытии_к_ручке.php, чтобы увидеть, достаточно ли у пользователя средств на его счете или нети, если он это сделает, он отобразит код JavaScript, который создаст анимацию для рулетки, а также выдаст призовой приз.В целях безопасности я выполняю код js в php, поэтому у пользователя нет доступа к нему, поскольку он выполняется на стороне сервера.

Проблема здесь заключается в том, что код js и jquery не выполняется после достижения этой строки кода:

var gw = $(".gift").outerWidth(true);

в creation_case_handler.php .

Вы заметите, что есть два предупреждения до и после предыдущего кода строки, который я только что упомянул.Если я раскомментирую оповещение («TEST1»), оно будет выполнено и появится оповещение, однако остальная часть кода не будет выполнена.Также, если я раскомментирую только предупреждение («TEST2»), оно не будет выполнено и ничего не произойдет.

Чтобы убедиться, что код JavaScript действительно работает.Ранее я проверил его в файле javascript и нашел в файле index.php, и он отлично работал.

index.php

Эта страница содержит рулетку со всемиразные изображения каждого предмета.Кнопка отправки находится внизу.Это кнопка, которую пользователи нажимают, чтобы иметь возможность вращать рулетку.

    <div class='rafflebox'>
      <div class='pointer'></div>
      <div class='boxwrapper'>
        <ul class='giftwrapper'>

          <div class="gift item bg-size2 box-bg3">
              <img class="item-product2" src="graphics/mouse.png" draggable="false">
          </div>

          <div class="gift item bg-size2 box-bg2">
              <img class="item-product2" src="graphics/mouse.png" draggable="false">
          </div>

          <div class="gift item bg-size2 box-bg3">
              <img class="item-product2" src="graphics/mouse.png" draggable="false">
          </div>

          <div class="gift item bg-size2 box-bg4">
              <img class="item-product2" src="graphics/mouse.png" draggable="false">
          </div>


        </ul>
      </div>
    </div>

    <form  method="post">
      <button type="submit" name="opening_case" class="btn open-box-btn btn-openbox-font button"><img id="lock" src="graphics/iconos/Candado Cerrado Black.png">ABRIR CAJA</button>
    </form>

  </div>

creation_case_handler.php

<?php
session_start ();

if(isset($_POST['opening_case']))
{
 opening_case ();

} 

function opening_case ()

{

if ($_SESSION['balance'] >= $_SESSION['box price'])

  {
    echo '
    <script>
      //alert("TEST1");
      var giftamount = 10;
      var gw = $(".gift").outerWidth(true);
      //alert("TEST2");
      var giftcenter = gw/2;
      var cycle = 7;

      var containercenter = $(".boxwrapper").outerWidth(true)/2;
      for(var i = 0; i <=5; i++)
        {
          var giftduplicate = $(".giftwrapper").children().clone(true,true);
           $(".giftwrapper").append(giftduplicate);
        }

      $(".button").click(function()
      {
            alert("You DO have sufficient funds");
            var btn = $(this);
            btn.hide();
            var randomgift = Math.floor(Math.random() * 4) + 1;
            var dev = Math.random()*(giftcenter+1);
            var distance = giftamount *  cycle * gw   + (randomgift*gw) - containercenter -24 +dev;

            console.log(distance);

            $( ".giftwrapper" ).css({left: "0"});

            $(".giftwrapper").animate({left: "-="+distance},10000,function()
              {
                alert("You Won Gift" + randomgift);
                btn.show();
              });

    });


    </script>';

   } else {

    //to be done

  }
}


?>

Пожалуйста, не стесняйтесь высказывать свои идеио том, как этот тип системы должен быть лучше построен.Я открыт для всех предложений, я довольно новичок в этом.

Спасибо !!

Answer 1

Если это просто файл кода php.Вы можете попробовать немного ниже.

<?php

echo "some stuff here" 

if ($condition){ ?>

<script>
alert("condition true");
</script>

<?php } else { ?>

<script>
alert("condition false");
</script>


<?php }?>

Answer 2

Когда форма отправляется, она перенаправляет вас на страницу PHP (т. Е. Когда вы нажимаете кнопку отправить в index.php, вы будете перенаправлены на creation_case_handler.php), а затем страница PHP отправляет вас обратно на страницу индекса с новойИнформация.Таким образом, ваш код javascript печатается в файле creation_case_handler.php, поэтому ваш код javascript не был выполнен.Кроме того, ваш код javascript всегда будет виден, если только вы не делаете что-то действительно творческое, поэтому, если вы пытаетесь обрабатывать какую-либо конфиденциальную информацию, делайте это в PHP или в любой используемой вами серверной среде.

Есть способы решить эту проблему, но я бы порекомендовал другой подход для решения этой проблемы.Вы можете использовать AJAX-запрос, который в основном работает следующим образом:

1. Вы отправляете запрос на ваш сервер PHP с данными, которые хотите отправить.
2. Ваш сервер PHP будет обрабатыватьзапрос и отправит его вам

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

   Таким образом, ваш алгоритм не отображается, а вашклиент (сторона javascript) обрабатывает только информацию, введенную пользователем, и результаты получены с сервера.

В вашем случае мы можем сделать это, используя следующие изменения

Index.php (который теперь можно изменить на index.html)

  <button type="submit" id="opening_case" name="opening_case" class="btn open-box-btn btn-openbox-font button"><img id="lock" src="graphics/iconos/Candado Cerrado Black.png">ABRIR CAJA</button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
    $("#opening_case").on("click", ()=>{
        // $.get( "opening_case_handler.php?opening_case=true", function( data ) {
        //     console.log(data.funds)
        // });
        $.ajax({
            url: "opening_case_handler.php?opening_case=true",
            success: (data)=>{
                if(data.funds) {
                    alert("You DO have sufficient funds")
                } else {
                    ("You don't have sufficient funds")
                }
            },
            dataType: "JSON"
        });
    })
</script>

opens_case_handler.php

<?php

if(isset($_GET['opening_case'])) {
   $result = [
      "funds" => true,
   ];
   $ResultsInJSON= json_encode($result);
   echo $ResultsInJSON; 
} 
?>

index.php отправит запрос при нажатии кнопки с помощью AJAX, который выможете прочитать об этом здесь https://api.jquery.com/jquery.get/, тогда ваш PHP получит запрос и ответ с кодом JSON, который может быть обработан с использованием данных. Как показано в примере выше.

Примечание: я не эксперт по PHP, но я считаю, что в этом случае этот метод будет лучше использовать.

Примечание 2: Вам не нужен Jquery для Ajax, но это проще!Вот как ты это делаешь без Jquery https://www.w3schools.com/xml/ajax_xmlhttprequest_send.asp

Answer 3

Попробуйте использовать Пример цитирования строки Heredoc для печати вашего JavaScript:

$str = <<<EOD
Example of string
spanning multiple lines
using heredoc syntax.
EOD;

---

Текст Heredoc ведет себя подобно двойным кавычкамСтрока, без двойных кавычек.Это означает, что кавычки в heredoc не нужно экранировать, но коды перехода, перечисленные выше, все еще можно использовать.Переменные раскрываются, но при выражении сложных переменных внутри heredoc необходимо соблюдать ту же осторожность, что и со строками.