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=”。请使用尽可能清晰的答案。

如果您还有其他需要，请告诉我！

编辑：我忘了提一下，如果我从此type="button"中删除<button type="button"会起作用。

Answer 1

一种可能的解决方案是，您可以让您的PHP代码将“假”值返回给表单。这将阻止页面刷新。这样，PHP代码将调用python代码，但由于从PHP函数返回了错误值，因此该表单不会刷新。

Answer 2

坏消息是您将必须使用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>

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

2 个答案: