发送 URL 请求，不离开页面

Question

我有一个网页，带有流式网络摄像头。摄像机摇摄和倾斜，使用摄像机内部网络服务器上的脚本。我无法修改脚本，它的输出是一个显示 "OK".

的网页

当用户来到我的页面时，我希望他们能够使用箭头键平移相机，但没有发送请求的脚本，让页面带有相机流。此源将平移相机，但您必须单击后退才能进入流。这是我的来源：

<head>
    <?php
    $url = "http://Camera-server-IP/decoder_control.cgi?user=admin&pwd=password&command=2";
    ?>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).keypress(function (e){ 
    if(e.keyCode == 37) // left arrow
    {
    window.location.href = <?php echo "\"" . $url . "\""; ?>; 
    }

    else if(e.keyCode == 38)    // up arrow
    { 
$(window.location.href = "http://Camera-server-IP/decoder_control.cgi?user=admin&pwd=password&command=6"); 
    }

    else if(e.keyCode == 39)    // right arrow
    { 
    window.location.href = "http://Camera-server-IP/decoder_control.cgi?user=admin&pwd=password&command=4";  

    }

    else if(e.keyCode == 40)    // Down arrow
    { 
    window.location.href = "http://Camera-server-IP/decoder_control.cgi?user=admin&pwd=password&command=0";      
    }
});
</script>
<title>Navigation</title>
</head>
<body>
<br><h2>use arrows to navigate.</h2> 
<iframe src="http://Camera-server-IP/videostream.cgi?user=user&pwd=Password" width="330" height="260"></iframe>
</body>
</html>

Camera-server-IP 是实际的Camera Webserver 地址。为什么每个导航箭头的做法都不一样？因为我正在想办法解决这个问题。

如何使用箭头键向摄像头发送 url 请求，但同时停留在摄像头正在播放的页面上？

Answer 1

页面正在向前移动，因为您正在将 window 位置设置到新的 link。您想要做的是使用 AJAX 进行调用，之后您应该会留在当前页面上。 JQuery 不是必需的，但会让事情变得更容易。

使用 Jquery 的示例：

if(e.keyCode == 38)    // up arrow
{ 
    $.get("http://Camera-server-IP/decoder_control.cgi?user=admin&pwd=password&command=6", function() {
        //on successful call
    });
}

您可以在 https://api.jquery.com/jquery.get/

使用 jquery 查看有关请求的更多信息

发送 URL 请求，不离开页面

send URL request, without leaving page

javascript

url

streaming

redirect

url-redirection