Question

如何使用 ajax

在 codeigniter 加载个人资料视图中登录并显示用户个人资料

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) {
            // $this->load->view('user_profile');
            echo 'login';
        } else {
            $data = array(
                'error_message' => 'Invalid Username or Password');
            $this->load->view('user/login', $data);
        }
    }

如何在脚本中加载用户个人资料视图期望登录成功消息

         <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);
                                setTimeout(function () {
                                    $('#successmessage').fadeOut("slow");
                                }, 2000);
                            }
                            });
                        }
                    })
                </script>

Answer 1

您可以尝试此代码

PHP： - 返回带有重定向url的json响应到ajax请求。

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) {
        exit(json_encode(array(
            'loginStatus' => true,
            'redirectUrl' => '/user-profile', // or else where you want to redirect
            'errorMsg' => ''
        )));
    } else {
        exit(json_encode(array(
            'loginStatus' => false,
            'redirectUrl' => false,
            'errorMsg' => 'Invalid username or Password'
        )));
    }
}

Js： - 使用json数据显示错误消息或重新显示到User Profile页面。

$('#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) {
                data = $.parseJSON(data); // parse text to json object
                if (data.loginStatus) { // check if loginStatus is true
                    window.location.href = data.redirectUrl
                } else { // else show the error message
                    $('#successmessage').fadeIn().html(data.errorMsg);
                    setTimeout(function () {
                        $('#successmessage').fadeOut("slow");
                    }, 2000);
                }
            }
        });
    }
});

Answer 2

这里我了解您要加载视图的成功。

因此，当您的ajax被调用到特定的控制器函数时，作为回报，您将回显该视图，并在$this->load->view('page_view',$data,TRUE)中传递true作为参数。

现在在您调用ajax的同一页面中有div元素并替换ajax成功内容。

这将在该div中加载您的视图。

根据您的代码，请更改为以下

if ($result == TRUE) {       
    echo $this->load->view('user_profile',TRUE);        
} else {
    $data = array(
    'error_message' => 'Invalid Username or Password');
    $this->load->view('user/login', $data);
}

Answer 3

工作代码

    $('#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),
                    window.location.replace("<?php echo base_url(); ?>/User_controller/profile");
                }
            });
        }
    });

Answer 4

你可以尝试这个：

，将您的数据类型设置为脚本。你不需要在这里使用成功函数。

$.ajax({
  type: "POST",
  url: "<?= base_url();?>User_controller/success/",
  data: {uname: uname, upassword: upassword},
  datatype: 'script'
);

在您的方法中，使用flashdata获取成功消息。然后使用重定向功能加载个人资料页面。

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) {
      $this->session->set_flashdata('success', 'Success Login');
      // you should have a route here that loads the profile page
      redirect('user/profile');
   } else {
        $this->session->set_flashdata('error', 'Invalid Username or Password');
        // you should have a route here that loads the login page
        redirect('login');
   }

}

在您的登录和个人资料页面中，添加一个可以捕获您的flashdata的div，然后您可以在这里添加您的setTimeout。

<div class="success"><?php $this->session->flashdata('success'); ?> </div> <div class="error"><?php $this->session->flashdata('error'); ?> </div>

codeigniter使用ajax调用加载视图期望成功消息

4 个答案: