Question

这是控制器，如果用户登录失败，则加载两个视图如何防止

     public function index() {
            $this->load->view('header');
            $this->load->view('user/login');
        }

         public function success() {
                $data = array(
                    'uname' => $this->input->post('uname'),
                    'upassword' => $this->input->post('upassword')
                );
                $result = $this->login_model->login_user($data);
                if ($result == TRUE) {
                    echo 'Lgoin success';
                } else {
                    $data = array(
                        'error_message' => 'Invalid Username or Password');

                    $this->load->view('user/login', $data);
                }
        }

如果用户失败则将ajax表单数据发送到控制器，显示不同的视图

<script>
    $('#login_form').submit(function (e)
    {
        e.preventDefault();
        var uname = $('#uname').val();
        var upassword = $('#upassword').val();
        if (uname == "" || upassword == "")
        {
            $('#errmessage').show().html('All Fields are required');
        } else {
            $('#errmessage').html("").hide();

            $.ajax({
                type: "POST",
                url: "<?= base_url(); ?>User_controller/success/",
                data: {uname: uname, upassword: upassword},
                success: function (data) {
                    $('#successmessage').fadeIn().html(data);
                    setTime(function () {
                        $('#successmessage').fadeOut('slow');

                    }, 200);
                }
            });
        }
    })
</script>

Answer 1

Ajax就像这样

<script>
$(document).ready(function(){
    $('#login_form').submit(function (e)
    {
        e.preventDefault();
        var uname = $('#uname').val();
        var upassword = $('#upassword').val();
        if (uname == "" || upassword == "")
        {
            $('#errmessage').show().html('All Fields are required');
        } else {
            $('#errmessage').html("").hide();
            $('#errmessage').fadeOut('fast');
            $('#successmessage').fadeOut('fast');

            $.ajax({
                type: "POST",
                url: "<?=base_url("User_controller/success"); ?>",
                data: {uname: uname, upassword: upassword},
                dataType: 'jSon',
                success: function (data) {
                    if(data.status == true)
                    {
                        $('#successmessage').fadeIn().html(data.message);
                        setTime(function () {
                            $('#successmessage').fadeOut('slow');

                        }, 200);
                        $("#profile").html(data.html);//Add a div with id profile 
                    }
                    else
                    {
                        $('#errmessage').fadeIn().html(data.message);
                        setTime(function () {
                            $('#errmessage').fadeOut('slow');

                        }, 200);
                    }
                }
            });
        }
    })
});
</script>

控制器代码可以是

public function success()
{
    $data = array(
                'uname' => $this->input->post('uname'),
                'upassword' => $this->input->post('upassword')
            );
   $result = $this->login_model->login_user($data);
   if ($result == TRUE) 
   {
       $html = $this->load->view("user/profile",$data,true);//THis will load profile view in a div you have to manage what to show
       $data = array('status'=>True,'message' => 'Login Successful','html'=>$html);
   } 
   else 
   {
       $data = array('status'=>False,'message' => 'Invalid Username or Password');
   }
   echo json_encode($data);
   exit;
}

Answer 2

当前，codeigniter不支持您正在寻找的功能。我使用了以下解决方法。

首先将您的函数修改为如下形式：

public function index() {
    $this->load->view('header');
    $this->load->view('user/login');
}
public function login_check(){
    //this function is for authentication

    $data = array(
        'uname' => $this->input->post('uname'),
                  'upassword' => $this->input->post('upassword')
    );
    $result = $this->login_model->login_user($data);

    //if check is passed return back a json response containing the status
    if($result == TRUE){
        return $this->output
        ->set_content_type('application/json')
        ->set_status_header(200)
        ->set_output(json_encode(array(
            'success' => true,
        )));
    }

    //if check is failed return back a json response containing the status and error message
    else{
        return $this->output
        ->set_content_type('application/json')
        ->set_status_header(200)
        ->set_output(json_encode(array(
            'success' => false,
            'error_message' => 'invalid Username or Password'
        )));
    }
}
public function login_success(){
    //i'll assume that your profile view is called profile
    //this function is called once authentication is passed it is called as a consequence of the  triggered submit event of the form by jquery

    $this->load->view('user/profile', $data);
}

通过将方法=“ POST”和操作设置为来修改表单 “ User_controller / login_success /”。而不是使用类型按钮的输入标签来提交表单，我们将使用具有提交ID的div。 div的onclick处理程序将用于通过ajax将数据发布到User_controller的login_check函数。如果身份验证为假，我们将收到一条错误消息并将其绑定到DOM（如果为真），那么我们将通过javascript手动触发登录表单的提交功能，这将调用User_controller的login_success（）函数，以加载配置文件视图。代码如下：

<script>
//div#submit is our custom submit button

$('div#submit').on('click', function (event) {
    event.preventDefault();

    var uname = $('#uname').val();
    var upassword = $('#upassword').val();
    if (uname == "" || upassword == "")
    {
        $('#errmessage').show().html('All Fields are required');
    } else {
        $('#errmessage').html("").hide();

        $.ajax({
            type: 'POST',
         url: "<?= base_url(); ?>User_controller/success"); ?>",
         data: {uname: uname, upassword: upassword},
         success: function (data) {
             if (data.success === false) {
                 //if authentication failed show error message
                 $('#successmessage').fadeIn().html(data.error_message);
                 setTime(function () {
                     $('#successmessage').fadeOut('slow');

                 }, 200);
             }
             //if authentication passed manually trigger form submission
             if (data.success === true) {
                 $('#login_form').trigger('submit');
             }

         }
        });
    }

});
</script>

防止在codeigniter和ajax中加载多个视图

2 个答案: