Question

我只是学习html和css，我需要做一个构建机器人并使用网站控制机器人的项目。

当我点击按钮时，它将转到其他页面或重新加载

如何在不重新加载页面的情况下传递按钮中的值？

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>RPOC</title>
    </head>

    <body>
        <form action="welcome.php" method="post" type='submit'>
            <button>FORWARD
            <input type="hidden" name="value" value="1"><br></button>
        </form>

        <form action="welcome.php" method="post" type='submit'>
            <button>BACKWARD
            <input type="hidden" name="value" value="2"><br></button>
        </form>

    </body>
</html>

Answer 1

你的HTML包含一些错误。试试这个：

<body>
    <form action="welcome.php" method="post">
        <input type="hidden" name="value" value="1">
        <button type="submit">FORWARD</button>
    </form>

    <form action="welcome.php" method="post">
        <input type="hidden" name="value" value="2">
        <button type="submit">FORWARD</button>
    </form>
</body>

删除类型=＆＃34;提交＆＃34;来自表单元素
删除了按钮元素中的隐藏输入
添加了类型=＆＃34;提交＆＃34;按钮元素

Answer 2

看起来你需要一个ajax电话......

尝试这样的方法，但你必须制作一个ajax.page.php文件。您可以在以下网址了解详情：http://api.jquery.com/jquery.ajax/

＆＃13;

$('#btoForward01').click(function(e){
    var value01 = $('#value01').val();
    var fullURL = "ajax.page.php?value01=" + value01;
    //console.log(urlCompleta);
    e.preventDefault();
    $.ajax({
        url: fullURL, 
        success: function(result){
            console.log('evething alright');
        },
        statusCode: {
            404: function(){alert( "Page not found" );},
            500: function(){alert( "PHP Error" );}
        }
    });
});

＆＃13;

<body>
    <form action="welcome.php" method="post">
        <input type="hidden" name="value" value="1" id="value01">
        <button type="submit" id="btoForward01">FORWARD</button>
    </form>
</body>

＆＃13;

如何使页面不重新加载单击按钮

2 个答案: