Question

我的页面连续（每秒）从服务器加载实时库存数据，向名为 data.php 的php文件发出请求。此外，我有一个Ganns square of 9计算器，它通过文本框的OnKeyUp函数使用ajax将值传递给PHP文件（ getdata.php ）并返回一些输出。

问题是 - 由于页面加载两者都完美。可以使用实时数据和计算器。但过了一会儿，计算器无法正常工作。在将值写入文本框时，必须处理请求，并且必须通过ajax调用返回值，但不会发生。

实时股票数据代码（每秒刷新）：

<script>
            function showPort(t)
            {
            var xmlhttp=new XMLHttpRequest();
            xmlhttp.onreadystatechange=function()
              {
              if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                document.getElementById("portfo").innerHTML=xmlhttp.responseText;
                }
              }
            xmlhttp.open("GET","data.php",true);
            xmlhttp.send();
            setTimeout(showPort,t);
            }
          </script>

它使用页面加载运行 -

<body onload="JavaScript:showPort(2000);">

运行文本框onkeyup事件的Ganns square计算器代码：

<script>
            function showData(str)
            {
            if (str.length==0)
              {
              document.getElementById("txtData").innerHTML="";
              return;
              }
            var xmlhttp=new XMLHttpRequest();
            xmlhttp.onreadystatechange=function()
              {
              if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                document.getElementById("txtData").innerHTML=xmlhttp.responseText;
                }
              }
            xmlhttp.open("GET","getdata.php?a="+str,false);
            xmlhttp.send();
            }
          </script>

运行文本框的onKeyUp事件 -

<input type="text" placeholder="Last traded Price" name="str" onKeyUp="showData(this.value)">

我尝试搜索类似的问题，但没有得到我的答案。因此，请将此问题作为新问题发布在此处。

Answer 1

第一个脚本：

function showPort(t)
{
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("portfo").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","data.php",true);
    xmlhttp.send();
    setTimeout(showPort,t);
}

可以这样转换：

$(document).ready(function(){
    setInterval(function(){
        $.get("data.php", function(data){
            $("#portfo").html(data);
        });
    }, 2000);
});

下一个：

function showData(str)
{
    if (str.length==0)
    {
        document.getElementById("txtData").innerHTML="";
        return;
    }
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("txtData").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","getdata.php?a="+str,false);
    xmlhttp.send();
}

可以改写为：

function showData(str)
{
    if (str.length==0)
    {
        $("#txtData").html("");
        return;
    }
    $.get("getdata.php?a="+str, function(data){
        $("#txtData").html(data);
    });
}

请您尝试执行上面的代码，看看它是否有效？不要忘记以这种方式包含jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

一段时间后，多个ajax请求无法正常工作

1 个答案: