使用与API

时间:2016-02-17 17:38:43

标签: javascript php ajax

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

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

它在测试环境中运行良好。我们进入了一个新的环境,硬件的设置略有不同,意识到它没有工作并改变了它。现在,我的自动提交功能尚未完成。 API开发人员建议我使用看门狗,所以我从@Drakes应用了code并修改它以与我的应用程序进行交互。这也行不通。我是Watchdog的小伙子,在开发领域的大多数事情中,我是否跳过了上一个问题中没有引用过看门狗的设置?

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);

1 个答案:

答案 0 :(得分:2)

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

编辑我的测试编码(经测试)

html代码和AJAX脚本如下 - &gt;

&#13;
&#13;
<!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>
&#13;
&#13;
&#13;

process.php的php代码如下 - &gt;

<?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文件保存在同一个文件夹中,然后对其进行测试。上面显示的&#34;运行代码片段&#34;按钮不会显示PHP代码的任何影响,因为它只运行HTML和JavaScript。所以要正确测试它,你应该将它保存在某个服务器上 - 本地或在线。