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

Question

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

我正在尝试用 raspberry pi 3b+ 制作一个网络服务器控制的机器人。我已经使用一些 HTML 调用一些 PHP 代码然后执行 Python 脚本来移动机器人。问题是，当我按下按钮移动机器人时，页面会刷新，然后再次加载所有内容，这真的很烦人。（HTML 和 PHP 在同一个文档中）

我读过一些 post 的文章，其中人们说要将 <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

一个可能的解决方案是您可以将 PHP 代码 return 一个 'false' 值返回到表单。这将阻止页面刷新。这样，PHP 代码将调用 python 代码，但表单不会刷新，因为它从 PHP 函数收到一个错误值。

Answer 2

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

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

首先，让我们得到一个可以执行 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>

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

Stop page refreshing when pressing HTML button?

html

php

refresh