Question

我希望有人可以帮我解决这个问题。

首先，如果已经提出这个问题，我会道歉。在发布之前，我确实经历了我学到很多东西的所有相关帖子。但我仍在努力使其发挥作用。我遇到的问题是，每当我按下主.html页面中的任何按钮时，php脚本似乎工作正常（即如果我按下左键我的相机转向左侧）但很快就会出现.php页面进入浏览器就好像我正在浏览它一样。

请在下面找到主.html文件的代码

<html>
<head>
<script type="text/javascript"             src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

$("#newForm").on("submit", function(e){

    var $inputs = $('#newForm :input'),
        values = {};
    $inputs.each(function() {
      values[this.name] = this.value;
    });

    $.ajax({
      type : "POST",
      url : "mycamera.php",
      data: values,
      success : function(res) {
        $("#result").html(res);
        $("input[type=text]").val("");
      }
    });

    return false;
  });

    $(".back").on("click", function(){
    $("#result").html("");
  });
</script>
</head>
<body>
<center><img src="http://192.168.1.70:8080/?action=stream" width="752"></center>
<form action="mycamera.php" method="post" id="newForm">
<div class="result"> </div>
<table
style="width: 75%; text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="2" cellspacing="2">
<tbody>
  <tr>
    <td style="text-align: center;">Turn Camera Left/Right</td>
    <td style="text-align: center;">Turn Camera Up/Down</td>
</tr>
<tr>
<td style="text-align: center;"><button name="Left">Left</button></td>
<td style="text-align: center;"><button name="Up">Up</button></td>
<td style="text-align: center;"><button name="RightIncrement">Right Increment</button>                </td>
</tr>
<tr>
<td style="text-align: center;"><button name="Right">Right</button></td>
<td style="text-align: center;"><button name="Down">Down</button></td>
<td style="text-align: center;"><button name="LeftIncrement">Left Increment</button>  </td>
</tr>
<tr>
<td style="text-align: center;"><button name="CentreLR">Centre L/R</button></td>
<td style="text-align: center;"><button name="CentreUD">Centre U/D</button></td>
<td style="text-align: center;"><button name="Reboot">Reboot</button></td>
</tr>
</tbody>
</table>
<div class="form_result"> </div>   
</form>
</body>
</html>

这是.php文件：

<?php 
if (isset($_POST['Left']))
{
exec('echo 1=60 > /dev/servoblaster');  
}
if (isset($_POST['Up']))  
{
exec('echo 0=60 > /dev/servoblaster');
}
if (isset($_POST['Right']))   
{
exec('echo 1=240 > /dev/servoblaster');
}
if (isset($_POST['Down']))
{
exec('echo 0=240 > /dev/servoblaster');
}
if (isset($_POST['CentreLR']))
{
exec('echo 1=150 > /dev/servoblaster');
}
if (isset($_POST['CentreUD']))
{
exec('echo 0=150 > /dev/servoblaster');
}
if (isset($_POST['RightIncrement']))
{
exec('echo 1=+10 > /dev/servoblaster');
}
if (isset($_POST['LeftIncrement']))
{
exec('echo 1=-10 > /dev/servoblaster');
}
if (isset($_POST['Reboot']))
{
exec('sudo /sbin/shutdown -r now');
}
?>

非常感谢您的帮助！

此致

Answer 1

您需要停止触发表单提交，并且在将事件绑定到元素之前，您也没有等待dom完全加载。因此，请将此<script>替换为：

<script>
    // wait for the DOM to fully load
    $(document).ready(function() {
        $("#newForm").on("submit", function(e) {
            // disable the default action
            e.preventDefault();
            var $inputs = $('#newForm :input'),
                    values = {};
            $inputs.each(function() {
                values[this.name] = this.value;
            });

            $.ajax({
                type: "POST",
                url: "mycamera.php",
                data: values,
                success: function(res) {
                    $("#result").html(res);
                    $("input[type=text]").val("");
                }
            });

            return false;
        });

        $(".back").on("click", function() {
            $("#result").html("");
        });
    })
</script>

有关preventDefault here的更多信息。有关.ready here。

的更多信息

Answer 2

您需要对原始代码进行许多编辑。我们在HTML中进行的唯一更改是删除表单操作 -

HTML

<body>
    <center>
        <img src="http://192.168.1.70:8080/?action=stream" width="752">
    </center>
    <form action="" method="post" id="newForm">
        <div class="result"></div>
        <table style="width: 75%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
            <tbody>
                <tr>
                    <td style="text-align: center;">Turn Camera Left/Right</td>
                    <td style="text-align: center;">Turn Camera Up/Down</td>
                </tr>
                <tr>
                    <td style="text-align: center;">
                        <button name="Left">Left</button>
                    </td>
                    <td style="text-align: center;">
                        <button name="Up">Up</button>
                    </td>
                    <td style="text-align: center;">
                        <button name="RightIncrement">Right Increment</button>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center;">
                        <button name="Right">Right</button>
                    </td>
                    <td style="text-align: center;">
                        <button name="Down">Down</button>
                    </td>
                    <td style="text-align: center;">
                        <button name="LeftIncrement">Left Increment</button>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: center;">
                        <button name="CentreLR">Centre L/R</button>
                    </td>
                    <td style="text-align: center;">
                        <button name="CentreUD">Centre U/D</button>
                    </td>
                    <td style="text-align: center;">
                        <button name="Reboot">Reboot</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="form_result"></div>
    </form>
</body>

在PHP代码中，我们使用更易读的switch语句做一点整理。我们每次都在测试$_POST['action']：

<?php
switch ($_POST['action']) {
  case 'Left':
    exec('echo 1=60 > /dev/servoblaster');  
    break;
  case 'Up':
    exec('echo 0=60 > /dev/servoblaster');
    break;
  case 'Right':
    exec('echo 1=240 > /dev/servoblaster');
    break;
  case 'Down':
    exec('echo 0=240 > /dev/servoblaster');
    break;
  case 'CentreLR':
    exec('echo 1=150 > /dev/servoblaster');
    break;
  case 'CentreUD':
    exec('echo 0=150 > /dev/servoblaster');
    break;
  case 'RightIncrement':
    exec('echo 1=+10 > /dev/servoblaster');
    break;
  case 'LeftIncrement':
    exec('echo 1=-10 > /dev/servoblaster');
    break;
  case 'Reboot':
    exec('sudo /sbin/shutdown -r now');
    break;    
} 
?>

最后是jQuery -

$(document).ready(function () {
    $('#newForm').on('click', 'button', function (e) {
        e.preventDefault();
        var action = $(this).attr('name'); // get the button name
        console.log(action); // just for testing

        $.ajax({
            type: "POST",
            url: "mycamera.php",
            data: {
                action: action // note that we're sending something that can be used in $_POST
            },
            success: function (res) {
                $("#result").html(res);
            }
        });
    });

    $(".back").on("click", function () {
        $("#result").html("");
    });
});

你非常接近，但是你试图用作PHP提交数据的一些语法问题和一些输入（你没有在表单中添加）并不存在。没有表单提交，但按钮的行为与提交相同，我们没有停止默认操作。

Answer 3

我认为你需要将你的事件监听器包装在$（document）.ready（function（）{//你的代码}）中;或者将脚本标记放在表单元素之后。问题是当您的脚本运行时，它首先执行事件绑定，然后呈现#newForm DOM对象。为了解决这个问题，您需要确保在绑定事件之前已经将DOM元素加载到浏览器中。

其次你需要添加e.preventDefault（）;避免页面刷新（默认表单提交事件）。

尝试这样，

$(document).ready(function(){
    $("#newForm").on("submit", function(e){
       e.preventDefault();
       //your code
    });
});

Ajax提交表单而不刷新页面

3 个答案: