Javascript 获取ajax的默认文本输入值_Javascript_Ajax

Javascript 获取ajax的默认文本输入值

javascript ajax

Javascript 获取ajax的默认文本输入值,javascript,ajax,Javascript,Ajax,我是一个嵌入式系统开发人员，我不擅长网络开发。这个问题应该很简单，我很抱歉 MCU使用TCP/IP协议向网络发送html代码。索引页运行良好。但我的客户要求设置页面。此设置页面必须在开始时获取默认数据我有2个简单的网页 html请求ajax数据，获取数据并显示 Settings.html请求ajax数据，获取数据，但未显示多谢各位 Index.html-正在工作 <html lang="en-US"> <head> <title>Stackoverfl

我是一个嵌入式系统开发人员，我不擅长网络开发。这个问题应该很简单，我很抱歉

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

我有2个简单的网页

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>


堆叠溢出样本
桌子
{
字号：17px；
边框：2件纯黑；
边界塌陷：塌陷；
边框颜色：白色；
bgcolor=“#e8e8e8”
cellpadding=“5”
cellspacing=“0”
rules=“无”
}
th{
边框：2件纯黑；
边界塌陷：塌陷；
边框颜色：白色；
bgcolor=“#e8e8e8”
cellpadding=“5”
cellspacing=“0”
rules=“无”
填充物：5px；
文本对齐：左对齐；
背景颜色：浅灰色；
}
运输署{
边框：2件纯黑；
边界塌陷：塌陷；
边框颜色：白色；
bgcolor=“#e8e8e8”
cellpadding=“5”
cellspacing=“0”
rules=“无”
填充物：5px；
文本对齐：左对齐；
高度：35px；
}
#国防部{
宽度：75%；
}
索引



相位指数
L1相
输入电压（AC V）：
0
输出电压（AC V）
0
var myVar=setInterval（getMeasurement，500）；
函数getMeasurement（）{
var xhttp=newXMLHttpRequest（）；
open（“GET”，“ajax.html”，true）；
xhttp.onreadystatechange=函数（）
{
如果（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（）；
}

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>


堆叠溢出样本
桌子
{
字号：17px；
边框：2件纯黑；
边界塌陷：塌陷；
边框颜色：白色；
bgcolor=“#e8e8e8”
cellpadding=“5”
cellspacing=“0”
rules=“无”
}
th{
边框：2件纯黑；
边界塌陷：塌陷；
边框颜色：白色；
bgcolor=“#e8e8e8”
cellpadding=“5”
cellspacing=“0”
rules=“无”
填充物：5px；
文本对齐：左对齐；
背景颜色：浅灰色；
}
运输署{
边框：2件纯黑；
边界塌陷：塌陷；
边框颜色：白色；
bgcolor=“#e8e8e8”
cellpadding=“5”
cellspacing=“0”
rules=“无”
填充物：5px；
文本对齐：左对齐；
高度：35px；
}
#国防部{
宽度：75%；
}
设置
SET00:

SET01:

函数getMeasurement（）{
var xhttp=newXMLHttpRequest（）；
open（“GET”，“ajax.html”，true）；
xhttp.onreadystatechange=函数（）
{
如果（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（）；
}

对于要设置

值的输入元素，而不是innerHTML
。试试这个：
document.getElementById("SET00").value = msr_strg[0];
document.getElementById("SET01").value = msr_strg[1];

我首先注意到，您正在调用相同的操作“ajax.html”-这应该是“Settings.html”吗？（在第二个ajax调用中，您正在分析不同值的结果。如果该操作同时返回两组值，那么这将起作用…）
我注意到的第二件事是，您已经将jQuery导入到页面中，但没有使用它。API非常友好，可以通过许多选项为您抽象异步处理。$。加载（…）、$.ajax（…）等。。不确定您是否想沿着这条路走。
请参阅下面的内容，了解何时使用innerHTML和值dfsq，谢谢。它正在工作，但在我的代码中，每500毫秒获取一个值。如果我删除“var myVar=setInterval（getMeasurement，500）；”。它不工作，代码也不发送请求（ajax.html），我只需要一次获取数据。您是否有解决方案。只需调用函数一次，而不是setTimeout（getMeasurement，500）
。为什么在调用中使用异步？如果您使用间隔来控制计时，为什么不同步？（xhttp.open（“GET”，“ajax.html”，false）；）