php - Displaying php output with html

Question

I am having trouble displaying output from a php script in html for a countdown timer. The times required are input through.

<div id="countdown">                                                                <!--        Display input for the kitchen timer     -->
                 <form method="post" action="display_timer()">
                        <br>
                        <br>
                        <h1>Enter the hours required:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="hours"><br></h1>
                        <h2>Enter the Minutes required:&nbsp;&nbsp;<input type="text" name="minutes"><br></h2>
                        <h3>Enter the Seconds required:&nbsp;&nbsp;<input type="text" name="seconds"><br></p>
                        <br>
                        <br>
                   <h4><input type="submit" name="Submit" value="Submit"></h4>
                 </form>

            </div>

Called from a php script with ajax below

function display_timer(){

        var myAjax9 = new XMLHttpRequest;
        myAjax9.open("GET", "timer.php");  
        myAjax9.onreadystatechange =    function(){
            if (myAjax9.readyState == 4 && myAjax7.status == 200){

                document.getElementById("timerdisplay").innerHTML = hours+" hours, "+minutes+" minutes, "+seconds+" seconds";
                IT=window.setTimeout( "setcountDown()", 10 );
                if (hours == '00' && minutes == '00' && seconds == '00') { 
                    seconds = "00"; 
                    window.clearTimeout(IT);
                    window.alert("Time is up. Press OK to continue.");
                }   
            }
        }
}

and displayed with

 <div id="timerdisplay"> <?php echo "$hoursLeft hours, $minutesLeft minutes, $secondsLeft seconds";?></div>     <!--       Display output for the kitchen timer     -->

I can put the timer php code on if required.

I am new to php and Ajax so may be doing something hopelessly wrong?

Answer 1

如果您需要将时间数据发送到 PHP，那么您需要解决这个问题：

• 表单的Action属性应该具有将接收提交数据的表单的 url。
• 但是：如果您想发送数据 throw ajax 那么您可能需要更改action="display_timer()"for ，并在函数的最后一行onsubmit="return display_timer()"添加 a （这将取消提交，以便您可以使用 ajax）。return falsedisplay_timer

• 此外，如果要检索您的数据，则抛出一个 ajax 调用，那么您timer.php应该发送类似这样的内容（JSON 表达式）：

  <?php echo "{\"hours\":\"$hoursLeft\", \"minutes\":\"$minutesLeft\", \"seconds\":\"$secondsLeft\"}";?>

然后，您的display_timer功能将是：

function display_timer(){
    var cParams =   "hours=" + escape(document.getElementsByName("hours")[0].value) +
                    "&minutes=" + escape(document.getElementsByName("minutes")[0].value) +
                    "&seconds=" + escape(document.getElementsByName("seconds")[0].value);

    var myAjax9 = new XMLHttpRequest();
    myAjax9.open("GET", "timer.php" + "?" + cParams);  
    myAjax9.onreadystatechange =    function(){
        if (myAjax9.readyState == 4 && myAjax7.status == 200){
            var oMyTime = JSON.parse(myAjax9.responseText);
            oMyTime.totalSeconds = oMyTime.hours*3600+oMyTime.minutes*60+oMyTime.seconds;
            oMyTime.toString = function(){
                return oMyTime.hours+" hours, "+oMyTime.minutes+" minutes, "+oMyTime.seconds+" seconds"
            };

            var oDisplay = document.getElementById("timerdisplay");
            oDisplay.innerHTML = oMyTime.toString();

            var fUpdateTimer = function(){
                if(oMyTime.totalSeconds>0){
                    oMyTime.totalSeconds--;
                    oMyTime.hours = Math.floor(oMyTime.totalSeconds/3600); 
                    oMyTime.minutes = Math.floor((oMyTime.totalSeconds-oMyTime.hours*3600)/60); 
                    oMyTime.seconds = oMyTime.totalSeconds%60; 
                    oDisplay.innerHTML = oMyTime.toString();
                }else{
                    window.clearInterval(IT);
                    window.alert("Time is up. Press OK to continue.");
                }
            };
            var IT=window.setInterval(fUpdateTimer, 1000);
        }
    }
    return false;
}//END display_timer()