提交与 API 交互的表单问题 - Submit issues with form that interact with an API

我有一个与API交互的表单，我使用了一个简单的自动提交：

<script type="text/javascript">
    window.setTimeout(function(){
        document.getElementById('formSubmit').submit();
    },1000*20);
</script>

它在测试环境中工作得很好。我们进入了一个新的环境，硬件的设置略有不同，意识到这不起作用并对其进行了更改。现在我的自动提交不起作用。 API 开发人员建议我改用看门狗，所以我根据 @Drakes 应用了代码并对其进行了修改以与我的应用程序交互。这也不起作用。我是看门狗的菜鸟，在开发世界中的大多数事情，我是否跳过了上一个问题中未引用的看门狗设置？

function watchdog() {
    var xmlhttp;
    if (window.XMLHttpRequest){
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // code for IE6, IE5 - whatever, it doesn't hurt
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            // This is how you can discover a server-side change
            if(xmlhttp.responseText !== "<?php echo $currentValue; ?>") {
                document.location.reload(true); // Don't reuse cache
            }
        }
    };
    xmlhttp.open("POST","page.php",true);
    xmlhttp.send();
}
// Call watchdog() every 20 seconds
setInterval(function(){ watchdog(); }, 20000);

我想你还没有发布字段值[表单的字段]。您使用的 AJAX 代码每 20 秒检查一次是否更改了某个值。但据我所知，您希望每 20 秒提交一次表格。在这种情况下，AJAX 开机自检代码需要进行一些编辑。也许下面的事情可以解决你的问题。在这里，我假设您的表单有两个字段，因此正在提交两个值。如果你有更多的，那么你必须根据你的要求修改它。

编辑了我的测试代码（这是测试的）

html代码和AJAX脚本如下所示 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
function watchdog(value1,value2) {
var xmlhttp;
if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
} else {
    // code for IE6, IE5 - whatever, it doesn't hurt
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        // write any code as this block will be executed only after form succesfully submitted.
		document.getElementById("showresponse").innerHTML = xmlhttp.responseText;
        console.log(xmlhttp.responseText);// You can use this responseText as per your wish
        }
    }
xmlhttp.open("POST","process.php?value1="+value1+"&value2="+value2,true);
xmlhttp.send();
}
// Call watchdog() every 20 seconds
 window.setInterval(function(){ 
 var myForm = document.getElementById('formSubmit');
 var value1 = myForm.elements["field1"].value;
 var value2 = myForm.elements["field2"].value;
 // thus store all required field values in variables , 
 //here as instance I am assuming the form has two fields , hence posting two values
  watchdog(value1,value2); 
  }, 20000);
  
  function submitIt(){
  var myForm = document.getElementById('formSubmit');
 var value1 = myForm.elements["field1"].value;
 var value2 = myForm.elements["field2"].value;
 watchdog(value1,value2);
  }
</script>
</head>
<body>
<form id="formSubmit">
<input type="text" name="field1" value="value1" />
<input type="text" name="field2" value="value2" />
<button type="button" onclick="submitIt();">Submit</button>
</form>
<div id="showresponse"></div>
</body>
</html>

进程的 php 代码.php将如下所示 -->

<?php
 if(isset($_REQUEST['value1']) && isset($_REQUEST['value1']))
  {
   $value1 = $_REQUEST['value1'];
   $value2 = $_REQUEST['value2'];
   echo "Values are respectively : " .$value1." and ".$value2;
  }
 else
 {
  echo "Data not found";
 }
 ?>

在测试上面的代码示例时，不要忘记将 html 和 process.php 文件保存在同一个文件夹中，然后进行测试。上面显示的"运行代码片段"按钮不会显示php代码的任何效果，因为它只运行html和javascript。因此，要正确测试它，您应该将其保存在某个服务器上 - 本地或在线 .