按下 HTML 按钮时停止页面刷新？

Question

大家好，我是互联网语言的新手，我希望用苹果来解释你的帮助！

我正在尝试用树莓派 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=”。请使用尽可能清晰的答案。

如果您还需要什么，请告诉我！

编辑：我忘了提到如果我从这个<button type="button" 中删除type="button" 它会起作用。

Answer 1

坏消息是您将不得不使用 JavaScript 和 AJAX 来完成此操作。根本没有（合理的）解决方法。

好消息是你想做的事情其实很简单。由于没有条件数据，也没有要处理的返回数据，所以门槛已经很低了。我还假设您并不担心不良行为者会滥用代码中的漏洞，所以让我们开始吧。

首先，让我们获得一个可以进行 AJAX 调用的库。虽然没有必要，但这会让一切变得容易得多。

在您的

元素中，输入以下行：

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

接下来，为您的

元素添加一个 ID，以便我们更轻松地使用 jQuery 访问。

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

现在让我们在表单下方添加一些 JS 来处理表单提交。它必须放在后面，因为 html 元素需要在调用此代码之前存在。下面的代码主要改编自这个问题的答案：Submitting HTML form using 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>

Answer 2

一种可能的解决方案是您可以让您的 PHP 代码将“假”值返回给表单。这将阻止页面刷新。 这样 PHP 代码将调用 python 代码，但表单不会刷新，因为它从 PHP 函数接收到 false 值。