$ .post和alert()问题

时间:2019-03-20 15:41:26

标签: jquery json ajax alert

我有一个使用jQuery $ .post的表单来获取表单数据并将其发送到php脚本。然后,脚本会发回一些数据。我遇到的问题是,有时(在10%的时间中)单击表单上的提交按钮时,警报框不会出现?它几乎总是工作,但奇怪的是,没有警报框显示,但如果表单通过了php验证,则仍然输入数据。是时间问题吗?我还注意到,在移动设备上进行测试时,警报根本不会显示。这是JavaScript代码:

var jsonObj;
$(document).ready(function(){
    $('#form').submit(function(){
        var wScore = parseInt(document.getElementById('wScore').value);
        var lScore = parseInt(document.getElementById('lScore').value);
        var errors = 0;
        if(lScore > wScore){
            errors = 1;
        }
        if(errors != 0){
            alert('Winnings runs MUST be greater than losing runs.');
            return false;
        }
        var selNameW = document.getElementById("exampleInputEmail1");
        document.getElementById("textWinner").value = selNameW.options[selNameW.selectedIndex].text;
        var selNameL = document.getElementById("exampleInputPassword1");
        document.getElementById("textLoser").value = selNameL.options[selNameL.selectedIndex].text;
        $.post('query.php',$('#form').serialize()) 
            .done(function(data){
                jsonObj = JSON.parse(data);
                if(jsonObj.status == 'error'){
                    alert(jsonObj.errorMessage);
                }else{
                    alert("Successfully Entered! Winner: " + jsonObj.winner + " Loser: " + jsonObj.loser);
                }
        });
    });
});

PHP代码:

<?php 

include "dbconnect.php";

$jsonData = [];

extract($_POST);

$exampleInputEmail1 = intval($exampleInputEmail1);
$exampleInputPassword1 = intval($exampleInputPassword1);

$qqq = "SELECT * FROM games WHERE winner = '$exampleInputEmail1' AND game_date = '$inputDate' AND loser = '$exampleInputPassword1'";

$result = $conn->query($qqq);


if($password !== 'slopitch19'){
        $error = ['status' => 'error', 'errorMessage' => 'The password is incorrect or was left blank!'];
        $jsonData = json_encode($error);
    }

else if(empty($inputDate) || empty($wScore) || empty($lScore) || empty($password)){
    $error = ['status' => 'error', 'errorMessage' => 'A field was left blank.'];
    $jsonData = json_encode($error);
}

else if($exampleInputEmail1 == $exampleInputPassword1){
    $error = ['status' => 'error', 'errorMessage' => 'The winning team cannot be the same as the losing team.'];
    $jsonData = json_encode($error);
}

else if ($result->num_rows == 0){
    $sql2 = "INSERT INTO games (winner, loser, game_date, winner_name, loser_name, winner_score, loser_score) VALUES ('$exampleInputEmail1', '$exampleInputPassword1','$inputDate', '$textWinner', '$textLoser', '$wScore', '$lScore')";

    $sql = "UPDATE teams SET wins = wins + 1 WHERE team_id = '$exampleInputEmail1'";

    $sql3 = "UPDATE teams SET losses = losses + 1 WHERE team_id = '$exampleInputPassword1'";

    $values = ['status' => 'success', 'winner' => $textWinner, 'loser' => $textLoser];

    $jsonData = json_encode($values);

    $conn->query($sql);
    $conn->query($sql3);
    $conn->query($sql2);

    $conn->close();

}else if($result->num_rows > 0){
        $error = ['status' => 'error', 'errorMessage' => 'Someone else has already entered this game!'];
        $jsonData = json_encode($error);
}

echo $jsonData;




    ?>

1 个答案:

答案 0 :(得分:0)

我解决了这个问题。我认为出于某些原因,移动浏览器尤其是jQuery $ .post

有问题

更改为$ .ajax的过程如下:

var jsonObj;
$(document).ready(function(){
    $('#form').submit(function(e){
        e.preventDefault();
        var wScore = parseInt(document.getElementById('wScore').value);
        var lScore = parseInt(document.getElementById('lScore').value);
        var errors = 0;
        if(lScore > wScore){
            errors = 1;
        }
        if(errors != 0){
            alert('Winnings runs MUST be greater than losing runs.');
            return false;
        }
        var selNameW = document.getElementById("exampleInputEmail1");
        document.getElementById("textWinner").value = selNameW.options[selNameW.selectedIndex].text;
        var selNameL = document.getElementById("exampleInputPassword1");
        document.getElementById("textLoser").value = selNameL.options[selNameL.selectedIndex].text;
        $.ajax({
           type: 'POST',
           url: 'query.php',
           data: $('#form').serialize(),  
           success: function(data){
                jsonObj = JSON.parse(data);
                if(jsonObj.status == 'error'){
                    alert(jsonObj.errorMessage);
                }else{
                    alert("Successfully Entered! Winner: " + jsonObj.winner + " Loser: " + jsonObj.loser);
                }
           }
        });
    });
});