CodeIgniter TankAuth ajax 表单

Question

我使用的是最新版本的 CodeIgniter 和 TankAuth，所有功能都可以正常工作，例如登录、注销、电子邮件和注册。目前，当用户需要登录时，您会被重定向到一个单独的页面，即 /auth/login。

我正在尝试以模式加载登录页面（使用花式框），而不是要求用户离开当前页面并必须登录。

我遇到的问题是如何更改标准 TankAuth 设置以使用 ajax 提交表单，而不是提交表单然后重定向用户。

这是来自 auth/login 控制器的代码：

function login()
{
    if ($this->tank_auth->is_logged_in()) {                                 // logged in
        redirect('');

    } elseif ($this->tank_auth->is_logged_in(FALSE)) {                      // logged in, not activated
        redirect('/auth/send_again/');

    } else {
        $data['login_by_username'] = ($this->config->item('login_by_username', 'tank_auth') AND
                $this->config->item('use_username', 'tank_auth'));
        $data['login_by_email'] = $this->config->item('login_by_email', 'tank_auth');

        $this->form_validation->set_rules('login', 'Login', 'trim|required|xss_clean');
        $this->form_validation->set_rules('password', 'Password', 'trim|required|xss_clean');
        $this->form_validation->set_rules('remember', 'Remember me', 'integer');

        // Get login for counting attempts to login
        if ($this->config->item('login_count_attempts', 'tank_auth') AND
                ($login = $this->input->post('login'))) {
            $login = $this->security->xss_clean($login);
        } else {
            $login = '';
        }

        $data['use_recaptcha'] = $this->config->item('use_recaptcha', 'tank_auth');
        if ($this->tank_auth->is_max_login_attempts_exceeded($login)) {
            if ($data['use_recaptcha'])
                $this->form_validation->set_rules('recaptcha_response_field', 'Confirmation Code', 'trim|xss_clean|required|callback__check_recaptcha');
            else
                $this->form_validation->set_rules('captcha', 'Confirmation Code', 'trim|xss_clean|required|callback__check_captcha');
        }
        $data['errors'] = array();

        if ($this->form_validation->run()) {                                // validation ok
            if ($this->tank_auth->login(
                    $this->form_validation->set_value('login'),
                    $this->form_validation->set_value('password'),
                    $this->form_validation->set_value('remember'),
                    $data['login_by_username'],
                    $data['login_by_email'])) { // success

                redirect('');

            } else {
                $errors = $this->tank_auth->get_error_message();
                if (isset($errors['banned'])) {                             // banned user
                    $this->_show_message($this->lang->line('auth_message_banned').' '.$errors['banned']);

                } elseif (isset($errors['not_activated'])) {                // not activated user
                    redirect('/auth/send_again/');

                } else {                                                    // fail
                    foreach ($errors as $k => $v)   $data['errors'][$k] = $this->lang->line($v);
                }
            }
        }
        $data['show_captcha'] = FALSE;
        if ($this->tank_auth->is_max_login_attempts_exceeded($login)) {
            $data['show_captcha'] = TRUE;
            if ($data['use_recaptcha']) {
                $data['recaptcha_html'] = $this->_create_recaptcha();
            } else {
                $data['captcha_html'] = $this->_create_captcha();
            }
        }
        $this->load->view('auth/login_form', $data);
    }
}

视图中的代码是使用php打开并提交表单：

<?php
     $login = array(
    'name'  => 'login',
    'id'    => 'login',
    'value' => set_value('login'),
    'maxlength' => 80,
    'size'  => 30,
);
if ($login_by_username AND $login_by_email) {
  $login_label = 'Email or login';
      } else if ($login_by_username) {
    $login_label = 'Login';
    } else {
    $login_label = 'Email';
    }
    $password = array(
    'name'  => 'password',
    'id'    => 'password',
    'size'  => 30,
    );
    $remember = array(
    'name'  => 'remember',
    'id'    => 'remember',
    'value' => 1,
    'checked'   => set_value('remember'),
    'style' => 'margin:0;padding:0',
    );
    $captcha = array(
    'name'  => 'captcha',
    'id'    => 'captcha',
    'maxlength' => 8,
    );
?>
<?php echo form_open($this->uri->uri_string()); ?>
<?php echo form_submit('submit', 'Let me in'); ?>
<?php echo form_close(); ?>

会像使用 $.ajax 请求并将 url 设置为 /auth/login 控制器一样简单吗？ 如果是这种情况，那么我假设我还需要将 (true / false) 的返回 ajax 数据添加到 auth/login 控制器。

任何帮助将不胜感激。

Answer 1

好吧，我完全确定 codeIgniter 是如何工作的，但我将引导您完成整个过程，以便您尝试应用它。

然后，要发送表单，您必须在提交表单时定位。说这是你的表格

<form id="target" action="destination.html"> 
   <input type="text" value="Hello there" /> 
   <input type="submit" value="Go" /> 
</form>

$('#target').submit(function() { 
    alert('Handler for .submit() called.'); 
    return false; 
}); 

当您按下提交按钮时，此代码将运行。注意：确保返回 false；停止页面刷新。

在提交函数中，您需要将 POST 变量发送到登录进程的 php 文件。

$.post('doLogin.php', function(data) { 
    $('.result').html(data); 
});

所以结果应该是这样的

$('#target').submit(function() { 
        $.post('doLogin.php', function(data) { 
          $('.result').html(data); 
        }); 
   return false; 
});

请查看 jQuery API 以更好地学习 jQuery 函数。

get function to get the form

see when the form is submitted

jQuery post

这应该可以帮助您继续前进