登录AJAX和codeigniter

I am trying to incorporate AJAX into my work. I want it to log the user in once the login button has been pressed. Below is the relevant code. The view is calling the login function in my controller.

View

<form id="loginform" class="navbar-form navbar-right" action="https://siteurl/CI/index.php/postedLinks/login" method="post" role="search">
  <div class="form-group">
    <input type="text" name="username" class="form-control" placeholder="Username">
    <input type="password" name="password" class="form-control" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Login</button>
</form>

Controller

public function login(){
$this->form_validation->set_rules('username','Username', 'trim|required');
$this->form_validation->set_rules('password','Password', 'trim|required|callback_check_login');
if ($this->form_validation->run()==false) {
$data['links'] = $this->links_model->get_links();
$this->load->view('postedLinks', $data);

}else{
    redirect(site_url('postedLinks'), 'refresh');
}}

public function check_login($password){

    $username = $this->input->post('username');
    $result = $this->links_model->login($username,$password);
    if ($result) {
        $sess_array = array();
        foreach ($result as $row) {
            $sess_array = $arrayName = array('id' => $row->id, 'username' => $row->username);
            $this->session->set_userdata('logged_in', $sess_array);

        }
        return true;    
    } else{

        $this->form_validation->set_message('check_login', 'Invalid Username or Password');
        return false;
    }
}

It works perfectly however I need to add ajax into it however when I attempt it never works. Any help is appreciated. Below is what I have attempted to place in my view.

$(document).ready(function() {

  // process the form
  $('#loginform').submit(function(event) {

      // get the form data
      // there are many ways to get this data using jQuery (you can use the class or id also)
      // process the form

      $.ajax({
      url : "https://siteurl/CI/index.php/postedLinks/login"
      type : "POST",
      dataType : "json",
      data : {"username" : username, "password" : password},
      success : function(data) {
          // do something
      },
      error : function(data) {
          // do something
      }
  });
      // stop the form from submitting the normal way and refreshing the page
      event.preventDefault();
  });

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

3条回答默认最新

weixin_33712881 2017-01-06 19:24

关注

You've not modified the javascript in any way to show us your attempt. The code below should work to pass the username and password to the login controller but you'll need to decide what to do once the user is logged in. You'll also have to output some JSON from the login controller to tell it the login has been successful. Note, I've added ID tags to the HTML form to select the input values via jQuery.

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <form id="loginform" class="navbar-form navbar-right" action="https://siteurl/CI/index.php/postedLinks/login" method="post" role="search">
          <div class="form-group">
            <input id="uname" type="text" name="username" class="form-control" placeholder="Username">
            <input id="pass" type="password" name="password" class="form-control" placeholder="Password">
          </div>
          <button type="submit" class="btn btn-default">Login</button>
        </form> 

        <script>
            document.addEventListener("DOMContentLoaded", function(event) { 

              // process the form
              $('#loginform').submit(function(event) {

                  // get the form data
                  // note, I've added ID tags to your form above

                var u = $('#uname').val();
                var p = $('#pass').val();

                  $.ajax({
                      url : "https://siteurl/CI/index.php/postedLinks/login", //enter the login controller URL here
                      type : "POST",
                      dataType : "json",
                      data : {
                          username : u, 
                          password : p
                          },
                      success : function(data) {
                          // do something, e.g. hide the login form or whatever
                          alert('logged in');
                      },
                      error : function(data) {
                          // do something
                          alert('pooped the bed');
                      }
                  });
                  // stop the form from submitting the normal way and refreshing the page
                  return false;
              });
            }); 
        </script>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
</html>