javascript - Codeigniter jquery ajax登录: get value from database and compare data entered

Question

我正在尝试构建一个带有 Bootstrap 主题的 CodeIgniter jQuery ajax 登录系统。我想将管理员登录时输入的值与数据库中的值进行比较，当它们不匹配时，会提示错误且不刷新页面。非常感谢任何帮助和建议。谢谢。

这是我的代码:

readyLogin.js

var ReadyLogin = function () {

return {
    init: function () {

        /* Login form - Initialize Validation */
        $('#form-login').validate({
            errorClass: 'help-block shake animated', // You can change the animation class for a different entrance animation - check animations page
            errorElement: 'div',
            errorPlacement: function (error, e) {
                e.parents('.form-group > div').append(error);
            },
            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-success has-error').addClass('has-error');
                $(e).closest('.help-block').remove();
            },
            success: function (e) {
                e.closest('.form-group').removeClass('has-success has-error');
                e.closest('.help-block').remove();
            },
            rules: {
                'login-username': {
                    required: true
                },
                'login-password': {
                    required: true,
                    minlength: 5
                }
            },
            messages: {
                'login-username': {
                    required: "Please enter Administrator's username."
                },
                'login-password': {
                    required: "Please provide Administrator's password.",
                    minlength: 'Your password must be at least 5 characters long.'
                }
            }
        });
        $("#login-button").click(function(){
            var username = $("#login-username").val();
            var password = $("#login-password").val();

            var postData = {
                'username' : username,
                'password' : password,
                'msg' : 'login'
            };

            $.post('', postData, function(postData) {
                if (postData === 'login') {
                    alert('LOGIN SUCCESSFULL'+data);
                } else {
                    alert('LOGIN FAILED'+data);
                }
            });
        });
    }
};
}();

Controller /Login.php

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Login extends CI_Controller {

public function __construct() {
    parent::__construct();
    $this->load->helper('form');
    $this->load->helper('url');
    $this->load->helper('html');
}

public function index() {
    $data['error'] = 0;
    if ($_POST) {
        $this->load->model('Login_model');
        $username = $this->input->post('login-username', true);
        $password = $this->input->post('login-password', true);
        $user = $this->Login_model->login($username, $password);
        if (!$user && $user == null) {
            $data['error'] = 1;
        } else {    
            $data['error'] = 2;
            $this->session->set_userdata('username', $user['usename']);
            $this->session->set_userdata('password', $user['password']);
            redirect(base_url() . 'Maps');
        }
    }
    $this->load->view('Backend/page_ready_login', $data);
}

function logout() {
    $this->session->sess_destroy();
    redirect(base_url(), 'refresh');
}

}

我在从模型检查时验证输入，如果返回无效匹配，我会抛出一个值为 1 的 $data['error'] 变量。然后在 View 中 if $error == 1 ，它将显示一个错误，但我想在 jQuery 中执行此操作，因为这会刷新页面。

Login_model.php

<?php

class Login_model extends CI_Model {

function login($username,$password){
    $where=array(
        'username'=>$username,
        'password'=>sha1($password)
    );
    $this->db->select()->from('admin')->where($where);
    $query=$this->db->get();
    return $query->first_row('array');
}

}

views/page_comp_ready.php

<?php
include 'assets/Backend/inc/config.php';
$template['title'] = 'BCGIS | LOGIN';
$template['page_preloader'] = true;
?>
<?php include 'assets/Backend/inc/template_start.php'; ?>

<!-- Login Container -->
<div id="login-container">
<!-- Login Header -->
<h1 class="h3 text-light text-center push-top-bottom fadeIn animated">
    <div class="row">
        <div class="col-lg-3 fadeIn animated">
            <img src="<?= base_url(); ?     >assets/Backend/images/Ph_seal_davao_del_norte_panabo_city.png" style="width: 95px; height: 80px;"/>
        </div>
        <div class="col-lg-9 fadeIn animated">
            <strong>Brgy. Cagangohan Geographical Information System</strong>
        </div>
    </div>
</h1>
<!-- END Login Header -->

<!-- Login Block -->
<div class="block fadeIn animated">
    <!-- Login Title -->
    <div class="block-title">
        <h2>Administration Login</h2>
    </div>
    <!-- END Login Title -->

    <!-- Login Form -->
    <form id="form-login" action="<?php echo base_url(); ?>" method="post" class="form-horizontal">
        <?php if ($error == 1) { ?>
            <h5 class="alert alert-danger shake animated">Your Username/Password is incorrect!</h5>
        <?php } ?>
        <div class="form-group">
            <div class="col-xs-12">
                <input type="text" id="login-username" name="login-username" class="form-control" placeholder="Username..">
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-12">
                <input type="password" id="login-password" name="login-password" class="form-control" placeholder="Password..">
            </div>
        </div>
        <div class="form-group form-actions">
            <div class="col-sm-offset-2 col-sm-8 text-center">
                <center>
                    <button type="submit" id="login-button" name="login-button" class="btn btn-effect-ripple btn-block btn-primary"><i class="fa fa-check"></i> Sign In</button>
                </center>
            </div>
        </div>
    </form>
    <!-- END Login Form -->
</div>
<!-- END Login Block -->

<!-- Footer -->
<footer class="text-muted text-center fadeIn animated">
    <small><span id="year-copy"></span> &copy; <a href="#"><?php echo       $template['name'] . ' ' . $template['version']; ?></a></small>
</footer>
<!-- END Footer -->
</div>
<!-- END Login Container -->

<?php include 'assets/Backend/inc/template_scripts.php'; ?>

<!-- Load and execute javascript code used only in this page -->
<script src="<?= base_url(); ?>assets/Backend/js/pages/readyLogin.js">     </script>
<script>
$(function () {
    ReadyLogin.init();
});
</script>

<?php include 'assets/Backend/inc/template_end.php'; ?>

Answer 1

添加远程标签以使用ajax进行验证

rules: {
            'login-username': {
                required: true,
                remote: "your function URL"
            },
            'login-password': {
                required: true,
                minlength: 5
            }
        },
        messages: {
            'login-username': {
                required: "Please enter Administrator's username.",
                remote: "your Message"

            },
            'login-password': {
                required: "Please provide Administrator's password.",
                minlength: 'Your password must be at least 5 characters long.'
            }
        }

如果是服务器端，请编写工作代码(我对 PHP 没有足够的了解:)