Question

我正在尝试从我的Web服务器上的html网页上获取方向数据，覆盖范围发送到我的python脚本。我不知道将这些数据导出到表格或将其保留在变量状态是否最简单？这是HTML代码：

<!doctype html>
<html lang="en"> 
<head>
<meta charset="UTF-8">
<title></title>

<style type="text/css">
   body {
   font-family: sans-serif;
}

  .main {
  border: 1px solid black;
  box-shadow: 10px 10px 5px #888;
  border-radius: 12px;
  padding: 20px;
  background-color: #ddd;
  margin: 25px;
  width: 450px;
  margin-left:auto;
  margin-right:auto;  
}

.logo {
  width:275px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding: 15px;
}

.container {
  -webkit-perspective: 300; perspective: 300;
}
</style>

</head>
<body>
  <div class="main">
  <h2>Device Orientation</h2>
  <table>
    <tr>
      <td>Event Supported</td>
      <td id="doEvent"></td>
    </tr>
    <tr>
      <td>Tilt Left/Right [gamma]</td>
      <td id="doTiltLR"></td>
    </tr>
    <tr>
      <td>Tilt Front/Back [beta]</td>
      <td id="doTiltFB"></td>
    </tr>
    <tr>
      <td>Direction [alpha]</td>
      <td id="doDirection"></td>
    </tr>
  </table>
</div>

<div class="container" style="-webkit-perspective: 300; perspective: 300;">
<img src="html5_logo.png" id="imgLogo" class="logo">
</div>

<script type="text/javascript">
 init();
 var count = 0;

function init() {
  if (window.DeviceOrientationEvent) {
    document.getElementById("doEvent").innerHTML = "DeviceOrientation";
    // Listen for the deviceorientation event and handle the raw data
    window.addEventListener('deviceorientation', function(eventData) {
      // gamma is the left-to-right tilt in degrees, where right is positive
      var tiltLR = eventData.gamma;

      // beta is the front-to-back tilt in degrees, where front is positive
      var tiltFB = eventData.beta;

      // alpha is the compass direction the device is facing in degrees
      var dir = eventData.alpha

      // call our orientation event handler
      deviceOrientationHandler(tiltLR, tiltFB, dir);
      }, false);
  } else {
    document.getElementById("doEvent").innerHTML = "Not supported on your device or browser.  Sorry."
  }
}

function deviceOrientationHandler(tiltLR, tiltFB, dir) {
  document.getElementById("doTiltLR").innerHTML = Math.round(tiltLR);
  document.getElementById("doTiltFB").innerHTML = Math.round(tiltFB);
  document.getElementById("doDirection").innerHTML = Math.round(dir);

  // Apply the transform to the image
  var logo = document.getElementById("imgLogo");
  logo.style.webkitTransform = "rotate("+ tiltLR +"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";
  logo.style.MozTransform = "rotate("+ tiltLR +"deg)";
  logo.style.transform = "rotate("+ tiltLR +"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";
}


// Some other fun rotations to try...
//var rotation = "rotate3d(0,1,0, "+ (tiltLR*-1)+"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";
//var rotation = "rotate("+ tiltLR +"deg) rotate3d(0,1,0, "+ (tiltLR*-1)+"deg) rotate3d(1,0,0, "+ (tiltFB*-1)+"deg)";

Answer 1

如果您的Python CGI脚本配置为在请求时执行，您可以使用GET或POST方法将数据传递给它。

在JavaScript中添加以下内容：

var var1 = "something"; 
/*The variable you want to pass*/

function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest)
    {xmlhttp=new XMLHttpRequest();}
  else
    {xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

  xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      var yourVar =xmlhttp.responseText; 
      /*This is the response from Python*/
    }
  }

xmlhttp.open("GET","location/of/python/script.py?var1="+var1,true);
/*Change the above location to what you want*/
xmlhttp.send();
}

您在JavaScript中链接的python脚本必须以这样的行开头

#!c:\Python27\python.exe
#!/usr/bin/env python
# one of these two depending on the platform you use

然后，导入cgi模块并从JavaScript接收数据

import cgi
# Any error in the code will make the server return HTTP 500 Server Error
# so for debugging, you can include the following module
import cgitb; cgitb.enable() # debugging

# Get passed data
form = cgi.FieldStorage()
var1 = form.getvalue("var1")

从现在开始，您可以使用变量

执行任何操作

# If you want, for example, want to return a reversed value of the input just print it
# However, you must have the following line
print "Content-Type: text/html\n" #Required
# Now, return what you want
print reversed(str(var1))

此处的yourVar变量中的javascript将接收打印值： var yourVar =xmlhttp.responseText;

从现在开始，您可以通过JavaScript

执行返回变量所需的任何操作

如果在从浏览器调用时没有执行Python脚本，请将其添加到与Python脚本相同的目录中的.htaccess文件中，如果您运行的是Apache

Options +ExecCGI
AddHandler cgi-script .py

将HTML Web服务器变量或数据导出到python代码

1 个答案: