Остановить обновление страницы при нажатии кнопки HTML? - PullRequest
Новая
       10

Остановить обновление страницы при нажатии кнопки HTML?

0 голосов
/ 14 ноября 2018

Привет, ребята, я новичок в интернет-языках, и я хотел бы, чтобы ваша помощь была объяснена яблоками!

Я пытаюсь сделать робота, управляемого веб-сервером, с Raspberry Pi 3b +.Я уже получил это, работая с некоторым HTML, вызывая некоторый код PHP и затем выполняя сценарии Python для перемещения робота.Дело в том, что когда я нажимаю кнопку, чтобы переместить робота, страница обновляется, а затем загружает все заново, что делает его действительно раздражающим.(HTML и PHP находятся в одном и том же документе)

Я читал пост, в котором люди говорят использовать <button> теги с type="button", но когда я это делаю, ничего не происходит.Позвольте мне поделиться с вами кодом.Другие говорят, что используют AJAX, но я не знаю, как это сделать.

HTML: 

<form action="" method="post">
    <div>
        <div>
            <button type="button" name="boton7"><img src="imagenes/up.png"></button>
            </div>
            <div>
            <button type="button" name="boton8"><img src="imagenes/left.png"></button><!--
            --><button type="button" name="boton10"><img src="imagenes/stop.png"></button><!--
            --><button type="button" name="boton9"><img src="imagenes/right.png"></button><!--
            -->
            </div>
            <div>
            <button type="button" name="boton6"><img src="imagenes/down.png"></button>
            </div>
    </div>
</form>

PHP: 

<?php
    //Primera fila || mover_arriba.py
    if(isset($_POST['boton6'])){
            exec('python /var/www/html/mover_arriba.py');
    }

    //Primera fila || mover_abajo.py
    if(isset($_POST['boton7'])){
            exec('python /var/www/html/mover_abajo.py');
    }
?>

Я хотел бы знатьесли это можно сделать без использования AJAX или JS (интерпретируемые языки сбивают меня с толку) или если я могу что-то изменить в этом коде для достижения того, чего я хочу.Как вы можете видеть, я использовал форму, я не совсем понимаю, может ли кнопка сделать что-то без формы, почему иногда люди используют input="submit", я также видел "onclick=".Пожалуйста, используйте как можно более четкие ответы.

Если вам нужно что-то еще, пожалуйста, дайте мне знать!

РЕДАКТИРОВАТЬ: я забыл упомянуть, что если я удаляю type="button" из этого <button type="button", это работает.

Ответы [ 2 ]

0 голосов
/ 14 ноября 2018

Плохая новость заключается в том, что для этого вам придется использовать JavaScript и AJAX. Там просто нет (разумный) способ обойти это.

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

Прежде всего, давайте возьмем библиотеку, которая может выполнять вызовы AJAX. Хотя это и не нужно, это все делает намного проще.

Внутри элемента вставьте следующую строку: 

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Затем добавьте идентификатор к своему элементу , чтобы нам было легче получить доступ с помощью jQuery. 

<form id="robotform" action="" method="post">

Теперь давайте добавим несколько JS под форму для обработки отправки формы. Он должен быть размещен после, потому что элементы html должны существовать до вызова этого кода. Приведенный ниже код в основном адаптирован из ответа на этот вопрос: Отправка HTML-формы с использованием Jquery AJAX 

<script type='text/javascript'>
    /* Get the name of the button that was pressed */
    var buttonpressed;
    $('button').click(function() {
      buttonpressed = $(this).attr('name');
    })

    /* attach a submit handler to the form */
    $("#robotform").submit(function(event) {

      /* stop form from submitting normally */
      event.preventDefault();

      /* target url is the current page */
      var url = window.location.href;

      /* Create the data as a string so the button name is sent properly */
      var data = buttonpressed + '=true';

      /* Send the data using post with element id name and name2*/
      var posting = $.post( url, data );

      /* Alerts the results if unsuccessful */
      posting.fail(function( xhr, status, error ) {
        alert('Error sending the command: ' + error);
      });
    });
</script>
0 голосов
/ 14 ноября 2018

Одним из возможных решений может быть то, что ваш PHP-код может вернуть значение false в форму. Это предотвратит обновление страницы. Таким образом, код PHP будет вызывать код Python, но форма не будет обновляться, поскольку она получила ложное значение от функции PHP.

...