使用jquery ajax和codeigniter进行Boostrap登录弹出模型验证

时间:2016-09-01 08:51:42

标签: javascript jquery ajax codeigniter

我的问题:我点击登录按钮并打开登录弹出模型,我输入用户名和密码,然后按提交按钮,如果用户名和密码正确,则重定向仪表板页面,如果用户名和密码错误,则在弹出窗口中显示错误消息模型。我使用了codeigniter fremework.please帮助我...

控制器:

class Property extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->library('session');
    }

    public function index() {
        $username = $this->input->post('username');
        $password = $this->input->post('password');
        if ($username == 'admin' && $password == 'admin') {
            $user = array(
                'username' => $username,
                'password' => $password
            );
            $this->session->set_userdata($user);
            echo json_encode($user);
        } else {
            $errormsg = "Invalid UserName and Password";
            echo json_encode($errormsg);
        }
    }

    public function property_owner_detail() {
        $username = $this->session->userdata('username');
        if (!empty($username)) {
            //$this->output->cache(3600);
            $this->load->model('event_model');
            $this->load->helper('date');
            $data = array(
                'page_title' => 'Property',
                'location_collection' => $this->event_model->list_all()
            );
            $this->load->view('property/index', $data);
        } else {
            redirect('/Site');
        }
    }

}

查看:

<li><a href="#" style="color: red" data-toggle="modal" data-target="#property_owner_login">Login</a></li>


<div class="modal fade" id="property_owner_login" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title text-primary">Login</h4>
            </div>
            <div class="modal-body">
                <?php echo form_open(); ?>
                <div class="form-group">
                    <label class="control-label">Username:</label>
                    <input type="text" class="form-control" name="username" id="username" required="">
                </div>
                <div class="form-group">
                    <label class="control-label">Password:</label>
                    <input type="password" class="form-control" name="password" id="password" required="">
                </div>
                <?php echo form_close(); ?>
            </div>
            <div class="modal-footer">
                <button type="button" name="submit" id="property_owner_login" class="btn btn-success">Login</button>
            </div>
        </div>
    </div>
</div>

Javascript文件

var property_owner_login = {
    mode: "Add",
    modal: $("#property_owner_login"),
    add: function () {
        var username = $("#username").val();
        var password = $("#password").val();
        $.ajax({
            url: "/Property",
            type: 'POST',
            data: {username: username, password: password},
            success: function (data) {
                console.log(data)
                var obj = JSON.parse(data);
                //console.log(data.username);

                if (obj.username == 'admin' && obj.password == 'admin') {
                    window.location.href = 'property/property_owner_detail';
                } else {

                }
            }
        });
    }
};

$(document).ready(function () {
    $("#property_owner_login").click(function () {
        if (property_owner_login.mode == "Add") {
            property_owner_login.add();
        }
    });
});

1 个答案:

答案 0 :(得分:0)

在您的javascript函数中,您需要检查错误消息的响应。你可以格式化你喜欢的方式,但是对于登录你不想泄露太多的信息,比如'电子邮件不被识别',因为我可以继续思考,直到电子邮件被识别,然后我就在那里。所以只是有一个广义的'电子邮件和密码不匹配,请再试一次。' (除非您有其他机制,例如强制执行和增加延迟2,4,8,16,32等等尝试之间的秒数或3次尝试和锁定等)。

您必须检查您的js响应,如果它是,等于ERROR或FAIL或FALSE,或者您想要这样做,那么将广义错误消息插入到特定的(尽管最初是空白的)错误div中。模态,风格,但你想要它(使用$('#myErroDiv')= html('错误信息')或类似),就像你检查他们是否是管理员一样。

您对登录尝试的响应可能只是一个简单的TRUE或FALSE,重定向为TRUE,一般错误消息为FALSE。然后,他们转到TRUE的用户面板可以处理是否显示管理页面,具体取决于他们的角色。登录尝试时无需执行此操作。

希望有所帮助,

保罗。