防止在 codeigniter 和 ajax 中加載多個視圖

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);
}

通過將 method="POST" 和操作設置為“User_controller/login_success/”來修改您的表單。 我們將使用一個 id 為 submit 的 div，而不是使用按鈕類型的 input 標簽來提交表單。 我們 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>