如何将控制从php脚本返回到我的主页 - How to get control back from a php script to my main page?

How to get control back from a php script to my main page?

我在HTML主页Smartmeter.HTML中有一个javascript代码，通过它我可以显示每5秒更改一次的仪表数据。

现在，我需要每隔30秒通过php将javascript函数中更改的仪表数据插入mysql。

这意味着我需要停留在Smartmeter.html页面上，因为javascript函数正在执行5秒，同时每隔30秒将这个仪表数据（变量--target）插入mysql。

我怎样才能做到这一点？有人能帮我提供一些代码或建议吗。

我的Smartmeter.html页面：

    <html>
<head></head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
window.onload=dynamic;
var target=100;
function dynamic()
{
  var1=Math.random();
  target=target + var1 * 1000; 
  target=Math.round(target);
  if(target>123457)
  {
    target=15647;
  }
  document.getElementById('hidden').value = target;
  func();
}
function func()
{
  //configuration of the reading displayed
  var primary = document.getElementById("d").getElementsByClassName("imge")[0].getElementsByTagName("h2")[0];
  primary.innerHTML=target;
  alert('test');
  document.forms["myForm"].submit();
  // window.location.href = "http://localhost/SUA/Data_insertion.php?target=" + target;
  setTimeout(dynamic, 5000);
}
</script>
<body>
<style>
.imge
{
position: absolute;
top: 40%;
left: 30%;
margin-top: -150px;
margin-left: -150px;
}
h2{ 
position: absolute; 
top: 116px; 
left: 165px; 
width: 100%; 
}
p
{
position: absolute; 
top: 120px; 
left: 250px; 
width: 100%; 
}
input {
display: inline-block;
float: bottom;
}
</style>
<body bgcolor="#BDBDBD">
  <form action="Data_insertion.php" method="post" id="myForm">
  <input type="hidden" id="hidden" name="reading" value=""><br>
  <input type="submit" value="submit">
  </form>
  <div id="d">
    <div class="imge">
      <img src="meter.jpg" width="450" height="350" alt="" />
      <h2>1234578  </h2>
      <p><font size="5">kWh</font></p>
    </div>
  </div>
</body>
</html>

jQuery解决方案：

function submitValue(url, key, value){
    $.ajax({
        type: "POST",
        url: url,
        data: {
            key: key,
            value: value
        },
        success: function(data){
            alert("done: "+data);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert('Error');
        }
    });             
}

像这样处理您的数据：

<?php
    switch($_POST['key']){
        case "voltage": setVoltage($_POST['value']); break;
        case "current": setCurrent($_POST['value']); break;
        default: http_response_code(404); die()      break;
    }
    echo "successful set ".$_POST['key']." to ".$_POST['value'];
    function setVoltage($voltage){
        /* sql magic */
    }
    function setCurrent($current){
        /* sql magic */
    }
?>

编辑

对于您的问题，这个简单的版本应该有效：

function sendValue(){
    $.ajax({
        type: 'POST',
        url: 'Data_insertion.php',
        data: {
            reading: target
        },
        success: function(data){
            alert('done');
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert('Error');
        }
    }); 
}
function init(){
    // remove this line from function func()
    setTimeout(dynamic, 5000);
    setTimeout(sendValue, 30000);
}

和更改

<body bgcolor="#BDBDBD">
<form action="Data_insertion.php" method="post" id="myForm">
<input type="hidden" id="hidden" name="reading" value=""><br>
<input type="submit" value="submit">
</form>

至

<body bgcolor="#BDBDBD" onLoad="init()">
<button onClick="sendValue(target)">Submit</button>