Codeigniter Ajax登录表单验证

时间:2017-12-15 07:49:34

标签: jquery codeigniter

  

我已经离开编码一段时间了,回来似乎很麻烦,因为我试图使用Codeigniter创建一个Ajax登录表单。实际上,一切正常(我的意思是验证部分)但是当我完成验证表格并且应该登录时,表格就会停留在那里,盯着我看。我试图摆脱它并让自己登录,但我不能

控制器:

public function login()
{
    $data = array(
        'success' => false,
         'messages' => array(),
          'session_error' => false,
           'session_error_message' => array());


    $this->form_validation->set_rules('username', 'Username', 'trim|required|min_length[5]|max_length[12]', array(
        'required' => '%s feild cannot be empty',
        'min_length' => '%s field must be at least 5 characters in length.'));



$this->form_validation->set_rules('password', 'Password', 'trim|required|min_length[5]|max_length[12]', array(
        'required' => '%s feild cannot be empty',
        'min_length' => '%s field must be at least 5 characters in length.')); $this->form_validation->set_error_delimiters('<p class="text-danger" style="font-weight: bold">', '</p>');


    if ($this->form_validation->run() == TRUE ) {


        $user = $this->input->post('username');
        $pass = $this->input->post('password');


        if ($this->main_model->admin_login($user, $pass)) {

            $session_data = array('username' => $user);
            $this->session->set_userdata($session_data);
            redirect(base_url() . 'admin/dashboard', 'refresh');

        } else {


            $data['session_error'] = true;
            $this->session->set_flashdata('msg', '<p class="text-danger" style="font-weight: bold">Invalid Username or Password</p>');
            $data['session_error_message'] = $this->session->flashdata('msg');


        }

        $data['success'] = true;
    } else {


        foreach ($_POST as $key => $value) {
            $data['messages'][$key] = form_error($key);
        }


    }

    echo json_encode($data);
}

查看

  <form action="<?php echo base_url() ?>admin/login" method="POST" class="w3-container" id="aForm">
      <div class="form-group">
          <input type="text" class="w3-input w3-border w3-border-blue" name="username" value="Username" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Username';}" id="username">
     </div>

     <div class="form-group">
        <input type="password" class="w3-input w3-border w3-border-blue" name="password" value="Password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}" id="password">
    </div> 

    <button type="submit" name="" value="" class="w3-btn w3-border w3-border-blue">Submit</button>
</form>

JQuery的

$('#aForm').submit(function(event) {
event.preventDefault();
$.ajax({
    url: $(this).attr('action'),
    type: 'POST',
    dataType: 'json',
    data: $(this).serialize(),
    success: function (response) {
        if (response.success == true) {

                if (response.session_error == true) {
                $('.text-danger').remove();
                var el = $('#password');
                el.closest('div.form-group').addClass('strong').find('.text-danger').remove();
                el.after(response.session_error_message);

            } else {

                $('.text-danger').remove();
                window.location.href = $(this).attr('action');

            }       
        }else {

            $.each(response.messages, function(key, value) {
                var element = $('#' + key);
                element.closest('div.form-group').addClass('strong').find('.text-danger').remove();
                element.after(value);
            });

        }



    }
})
});

1 个答案:

答案 0 :(得分:1)

问题出在这一行:

redirect(base_url() . 'admin/dashboard', 'refresh');

如果不是基于AJAX,它可以正常工作。为什么它与AJAX“无法正常工作”,它实际上是有效的,但不是重定向的当前页面,而是重定向的AJAX调用。

然后,在重定向请求之前,您需要检查请求是否是AJAX调用。如果它不是AJAX调用,那么你可以像往常一样重定向它,但如果它是一个AJAX调用,你需要向客户端回复一些认证成功或失败的事情。例如:

echo json_encode(['success' => true]); // or false

或者如果请求始终是AJAX调用,您可以跳过AJAX请求检查并直接删除重定向,并将其更改为上面的代码