Question

我试图使用javascript在html上创建计时器，代码如下：

<script>
var duration = document.getElementById('duration'),
    start = document.getElementById('start'),
    timestart = document.getElementById('timestart'),
    timestop = document.getElementById('timestop'),
    stateupdate = document.getElementById('stateupdate'),
    seconds = 0, minutes = 0, hours = 0,
    state = 0,
    startedDate,
    durationTime,
    stoppedDate,
    t;

var idGate = 8;

function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }
    }
    
    start.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

    timer();
}
function timer() {
        t = setTimeout(add, 1000);
}

/* Start button */
start.onclick = function(){
    if(state==0){
        state=1;
        timer();
        var today = new Date();
        var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
        var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
        startedDate = date+' '+time;
        timestart.innerHTML = startedDate;
    }else if(state==1){
        state=2;
        durationTime = start.textContent;
        clearTimeout(t);
        start.textContent = "stopped";
        duration.innerHTML = durationTime;
        var today = new Date();
        var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
        var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
        stoppedDate = date+' '+time;
        timestop.innerHTML = stoppedDate;
        
        stateupdate.textContent = idGate;
        //get the input value
	    $.ajax({
            //the url to send the data to
            url: "updatestatus.php",
            //the data to send to
            data: {idGate : $idGate, startedDate : $startedDate, durationTime : $durationTime ,stoppedDate : $stoppedDate},
            //type. for eg: GET, POST
            type: "POST",
            //on success
            success: function(data){
                alert("sukses!");
                alert(data);
            },
            //on error
            error: function(){
                alert("Gagal");
                alert(data);
            }
        });
    }
}
</script>

.btn{
    display: inline-block;
    text-decoration: none;
    background: #87befd;
    color: #FFF;
    width: 180px;
    height: 180px;
    line-height:180px;
    border-radius: 50%;
    vertical-align: middle;
    overflow: hidden;
    box-shadow: 0px 0px 0px 5px #87befd;
    border: dashed 1px #FFF;
    transition: .4s;
    position: inherit;
    top: 40%;
    font-size: 40px;
}

.btn:hover{
    background: #668ad8;
     box-shadow: 0px 0px 0px 5px #668ad8;
}



.wrapper {
    margin: 20px;
    text-align: center;
}

.wrapper1 {
    width:40%;
    float:left;
    text-align: right;
    display: inline;
}
.wrapper2 {
    float: right;
    text-align: center;
    width:20%;
    display:inline;
}
.wrapper3 {
    float:right;
    width:40%;
    display:inline;
}

<head> <link rel="stylesheet" href="style.css"></head>
<div class="wrapper">
    <button id="start" class="btn">start</button>
</div>
<div class ="wrapper1">
    <h3>Time started : </h3><h2 id="timestart"> 00:00:00</h2>
</div>
<div class ="wrapper3">
    <h3>Time stopped : </h3><h2 id="timestop"> 00:00:00</h2>
</div>
<div class ="wrapper2">
    <h3>Durations : </h3><h2 id="duration"> 00:00:00</h2>
</div>   
<div class ="wrapper2">
        <h3>State : </h3><h2 id="stateupdate"> 00:00:00</h2>
</div>

因此，计时器工作正常，但我尝试传递这4个变量：$ idGate，$ startedDate，$ durationTime，$ stoppedDate。我已经尝试过这种ajax方法将变量传递给php，并在具有相同大小写的另一页上更新数据库，但效果很好。但是，当我尝试使用此计时器html时，我不知道为什么此方法不起作用。实际上在后台，此ajax方法正在运行，php接收从ajax方法传递的这4个变量，但是当我检查数据库时，数据完全变为null。我不知道这段代码有什么问题，我尝试将变量设置为static以检查代码是否不起作用或传递的变量为null。但是那也不起作用，计时器上也没有任何反应页面，警报未显示，没有任何反应。我缺少此代码的什么内容？

这是我的updatestatus.php：

if(isset($_POST['idGate'])){
include 'config.php';

$id           = $_POST['idGate'];
$startedDate  = $_POST['startedDate'];
$durationTime = $_POST['durationTime'];
$stoppedDate  = $_POST['stoppedDate'];

$queryselect = mysqli_query($con, "select * from dataperijinan where id='$id'");
$row = mysqli_fetch_array($queryselect);
if(!empty($row)){
    $nik            = $row['nik'];
    $namateknisi    = $row['namateknisi'];
    $nohp           = $row['nohp'];
    $jenispekerjaan = $row['jenispekerjaan'];
    $noktp          = $row['noktp'];
    $rangewaktu     = $row['rangewaktu'];
    $filelocationdb = $row['filelocation'];
    $status         = $row['status'];
    $tujuan         = $row['tujuan'];
    $sto            = $row['sto'];
}

$query = mysqli_query($con, "insert into histori values(0,'$namateknisi','$nik','$nohp','$noktp','$rangewaktu','$jenispekerjaan','$filelocationdb','$startedDate','$durationTime','$sto','$stoppedDate')");

if($query){
    $querydelete = mysqli_query($con, "delete from dataperijinan where id='$id'");
}

}

在ajax将参数传递给php时，页面上什么都没有发生？

0 个答案: