Question

我是一名嵌入式系统开发人员，我不擅长网络开发。这个问题对我来说应该很容易对不起。

MCU使用TCP / IP协议将html代码发送到网络。索引页面运行良好。但我的客户请求设置页面。此设置页面必须在开头获取默认数据。

我有2个简单的网页;

index.html请求ajax数据，获取数据并显示
Settings.html请求ajax数据，获取数据但未显示。

非常感谢。

Index.html - 工作

<html lang="en-US">
<head>
<title>Stackoverflow sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery-3.0.0.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</head>

<style>
    table
    {
        font-size:17px;
        border: 2px solid black;
        border-collapse: collapse;
        border-color :white;
        bgcolor="#e8e8e8" 
        cellpadding="5" 
        cellspacing="0" 
        rules="none"
    }
    th{
        border: 2px solid black;
        border-collapse: collapse;
        border-color :white;
        bgcolor="#e8e8e8" 
        cellpadding="5" 
        cellspacing="0" 
        rules="none"
        padding: 5px;
        text-align: left;
        background-color:lightslategrey;
    }
    TD {
        border: 2px solid black;
        border-collapse: collapse;
        border-color :white;
        bgcolor="#e8e8e8" 
        cellpadding="5" 
        cellspacing="0" 
        rules="none"
        padding: 5px;
        text-align: left;
        height:35px;
    }
    #mod {
    width: 75%;
}
</style>



<body bgcolor="#CDE2F4">
<h2><p style="color:black;">Index</p></h2>
<br><br>
<table><tbody>
<tr>
<th colspan="4" ><font color="#ffffff" size="4" face="Arial, Sans-Serif"><b>Phase Index</b></font></th>
</tr>
 <tr>
    <TD width="200" bgcolor="#F3F3F5"></TD>
    <TD width="100" bgcolor="#F3F3F5"><b>L1 Phase</b></TD> 
 </tr>
    <tr>
   <TD bgcolor="#dcdcdc"  font color="#000000"><b>input Voltage (AC V):</b></TD>
   <TD bgcolor="#D9E6E2"><p id="L1Vin">0</p></TD> 
   </tr>
  <tr>
   <TD bgcolor="#dcdcdc"  font color="#000000"><b>Output Voltage (AC V)</b></TD>
   <TD bgcolor="#D9E6E2"><p id="L1Vout">0</p></TD>
   </tr>


</tbody></table>
<script>
var myVar = setInterval(getMeasurement, 500);

function getMeasurement() {
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "ajax.html", true);

  xhttp.onreadystatechange = function() 
  {
    if (xhttp.readyState == 4 && xhttp.status == 200) 
    {
        var rxmeas = xhttp.response;
        var msr_strg = rxmeas.split(":"); 
        document.getElementById("L1Vin").innerHTML = msr_strg[0];
        document.getElementById("L1Vout").innerHTML = msr_strg[1];
        document.getElementById("L1Frq").innerHTML = msr_strg[2];
    }
  }
  xhttp.send();
}
</script>

<br><br>
</body>
</html>

Settings.html

 <html lang="en-US">
    <head>
    <title>Stackoverflow sample</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="jquery-3.0.0.min.js"></script>
    <script src="script.js" type="text/javascript"></script>
    </head>

    <style>
        table
        {
            font-size:17px;
            border: 2px solid black;
            border-collapse: collapse;
            border-color :white;
            bgcolor="#e8e8e8" 
            cellpadding="5" 
            cellspacing="0" 
            rules="none"
        }
        th{
            border: 2px solid black;
            border-collapse: collapse;
            border-color :white;
            bgcolor="#e8e8e8" 
            cellpadding="5" 
            cellspacing="0" 
            rules="none"
            padding: 5px;
            text-align: left;
            background-color:lightslategrey;
        }
        TD {
            border: 2px solid black;
            border-collapse: collapse;
            border-color :white;
            bgcolor="#e8e8e8" 
            cellpadding="5" 
            cellspacing="0" 
            rules="none"
            padding: 5px;
            text-align: left;
            height:35px;
        }
        #mod {
        width: 75%;
    }
    </style>
    <body bgcolor="#CDE2F4">
    <h2><p style="color:black;">Settings</p></h2>
<div id="border">
  <form  action="/" id="registerSubmit">
    <div id="1"></div>
      SET00: <input type="text" name="SET00" id="SET00" size="10"/><br>
      <div id="2" ></div>
      SET01: <input type="text" name="SET01" size="10" id="SET01"/><br>
      <input type="submit" name="submit" value="Apply New Settings" />
  </form>
</div>
    <script>

    function getMeasurement() {
      var xhttp = new XMLHttpRequest();
      xhttp.open("GET", "ajax.html", true);

      xhttp.onreadystatechange = function() 
      {
        if (xhttp.readyState == 4 && xhttp.status == 200) 
        {
            var rxmeas = xhttp.response;
            var msr_strg = rxmeas.split(":"); 
            document.getElementById("SET00").innerHTML = msr_strg[0];
            document.getElementById("SET01").innerHTML = msr_strg[1];
        }
      }
      xhttp.send();
    }
    </script>

    <br><br>
    </body>
    </html>

Answer 1

对于您要设置value的输入元素，而不是innerHTML。试试这个：

document.getElementById("SET00").value = msr_strg[0];
document.getElementById("SET01").value = msr_strg[1];

Answer 2

我首先注意到您正在调用相同的操作“ajax.html” - 这应该是“Settings.html”吗？（在第二个ajax调用中，您正在解析不同值的结果..如果该操作返回两组值，这将有效...）我注意到的第二件事是你将jQuery导入页面但没有使用。 API非常友好，可以为您提供多种选项的异步处理。 $ .load（...），$ .ajax（...）等。不确定你是否想走这条路。

获取默认文本输入值到ajax

2 个答案: