Question

我有一个表单中的字段，它接受'授权代码'并使用AJAX和PHP对数据库进行检查。我试图利用表单上的Bootstrap反馈来反馈给用户，如果代码错误的话。目前它不起作用，并且没有错误，如果有人能够指出这个问题会非常感激。

形式：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home</title>
    <!-- Scripts -->
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/validator.js"></script>
    <script src="js/validator.min.js"></script>
    <!-- CSS -->
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="css/bootstrap.css" rel="stylesheet">
</head>

<body>

<form id="auth_form" action="action.php" method="post">

  <div class="form-group has-feedback" name="auth_code" id="auth_code">
    <label for="auth_code" class="control-label">
    Authorisation Code</label>
    <input class="form-control" id="auth_code_input" name="auth_code_input" type="password">
    <span class="form-control-feedback glyphicon" id="iconBad"></span>
      <span id="auth_code_result"></span>
  </div>

  <div class="form-group">
    <div>
      <button class="btn btn-info" name="submit" type="submit" id="submit">Submit</button>
    </div>
  </div>

</form>

<!-- AJAX -->
<script type="text/javascript">
$(document).ready(function() {
    var x_timer;    
    $("#auth_code_input").keyup(function (e){
        clearTimeout(x_timer);
        var auth_code = $(this).val();
        x_timer = setTimeout(function(){
            check_auth_code_ajax(auth_code);
        }, 1000);
    }); 

function check_auth_code_ajax(auth_code){
    var $auth_code = $('#auth_code');
    $("#auth_code_result").html('<img src="img/ajax-loader.gif"/>');
    $.post('auth_code_checker.php', 
        {'auth_code_input':auth_code}, 
        function(data) {
            // data will be JSON, including a status we can use
            $("#auth_code_result").html('');
            showStatus(data.status, $auth_code);
        },
        'json'  // Expect JSON response from server
    );
}
</script>

<!-- Sets field to error/cross or success/tick -->
<script>

 function showStatus(status, $target) {
    if (status === 'ok') {
        $target.removeClass('has-error').addClass('has-success');
        $('.glyphicon', $target).removeClass('glyphicon-remove').addClass('glyphicon-ok');
    } else {
        $target.removeClass('has-success').addClass('has-error');
        $('.glyphicon', $target).removeClass('glyphicon-ok').addClass('glyphicon-remove');
    }
}
 </script>

</body>
</html>

auth_code_checker.php

<?php

include 'pdo_config.php';
try {
    $conn = new PDO($dsn, $user, $pass, $opt);

    $auth_code = $_POST["auth_code_input"];  
    $stmt = $conn->prepare("SELECT * FROM tbl_instructors WHERE auth_code = :auth_code");
    $stmt->bindParam(':auth_code', $auth_code);
    $stmt->execute();

    $exists = $stmt->fetchColumn();

    if ($exists > 0) {
        $response['status'] = 'ok';
    } else {
        $response['status'] = 'fail'; 
    }

    header("Content-Type: application/json", true);
    echo json_encode($response);

catch(PDOException $e) {
    echo "Error: " . $e->getMessage();
}

$conn = null;

Answer 1

在编码try{}块

之前，您需要终止catch(){}块

<?php

include 'pdo_config.php';
try {
    $conn = new PDO($dsn, $user, $pass, $opt);

    $auth_code = $_POST["auth_code_input"];  
    $stmt = $conn->prepare("SELECT * FROM tbl_instructors WHERE auth_code = :auth_code");
    $stmt->bindParam(':auth_code', $auth_code);
    $stmt->execute();

    $exists = $stmt->fetchColumn();

    if ($exists > 0) {
        $response['status'] = 'ok';
    } else {
        $response['status'] = 'fail'; 
    }

    header("Content-Type: application/json", true);
    echo json_encode($response);
}  // <-------------------------------------New line
catch(PDOException $e) {
    echo "Error: " . $e->getMessage();
}

$conn = null;

PHP AJAX - 验证字段不显示错误/成功

1 个答案: