Login AJAX und Codeigniter

Ich versuche AJAX in meine Arbeit zu integrieren. Ich möchte, dass der Benutzer angemeldet wird, sobald der Login-Button gedrückt wurde. Unten ist der relevante Code. Die Ansicht ruft die Login-Funktion in meinem Controller auf.Login AJAX und Codeigniter

Ansicht

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

Es perfekt funktioniert jedoch muss ich jedoch Ajax in es hinzuzufügen, wenn ich es nie funktioniert versuchen. Jede Hilfe wird geschätzt. Unten ist das, was ich versucht habe, in meiner Sicht zu platzieren.

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

Quelle

2017-01-06 ZeeSoft

Sie möchten also Daten zu Ihrem Benutzer einfügen, wenn die Schaltfläche Absenden richtig geklickt wird? –

Ich habe es so verstanden, wie er möchte, dass das Login-Formular über AJAX statt einer normalen POST-Anfrage und einem nachfolgenden Seitenwechsel ausgeführt wird. ??? – Juned

Ich habe den Link bearbeitet, auch ja, das ist, was ich tun möchte – ZeeSoft

Sie haben nicht das Javascript in keiner Weise verändert uns Ihr Versuch zu zeigen. Der folgende Code sollte funktionieren, um den Benutzernamen und das Passwort an den Login-Controller zu übergeben, aber Sie müssen entscheiden, was zu tun ist, sobald der Benutzer angemeldet ist. Sie müssen auch einige JSON vom Login-Controller ausgeben, um ihm die Anmeldung mitzuteilen war erfolgreich. Hinweis: Ich habe dem HTML-Formular ID-Tags hinzugefügt, um die Eingabewerte über jQuery auszuwählen.

<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>

Quelle

2017-01-06 19:24:19 Juned

danke, ich gab es einen Schuss, aber alles, was ich bekam, war Ihre Fehlermeldung pooped das Bett .. lol. Ich stelle die Check-Login-Funktion in das obige Snippet, wenn das helfen würde. – ZeeSoft

your problem is your controller:

Ihre Ajax Coderuf function login in Ihrem Controller und übergeben Sie zwei Variable es aber Ihre login function bekommt sie nicht, müssen Login-Funktion so aussehen:

public function login($Variable_one,$Variable_two)

Quelle

2017-01-06 21:27:03 nima

Hier ist ein Ausschnitt von einer der Ajaxformen, die ich benutze.

$("#form1").submit(function() { 
    var data = $("#form1").serialize(); 
    //alert(data); return false; 
    $.ajax({ 
     url: "/forms/form1", 
     data: data, 
     type: "POST", 
    success: function(msg) { 
      if (msg) { 
       $("#display").html(msg); 
      } else { 
       $("#display").text("nothing came back For some reason"); 
      } 
     } 
    }); 
    return false; 
});

Sie Ihre Formulardaten serialisiert. Sie verwenden nicht json, Sie verwenden Post. Sie müssen nicht die lange URL Ihrer Post-Methode oder URL angeben, sondern nur den Controller und die Methode, die Codeigniter selbst in die base_url einfügt. Versuchen Sie es auf diese Weise

Sie brauchen auch nicht verhindern, Standard. Verwenden Sie einfach return false

Quelle

2017-01-07 16:23:51 Brad

Login AJAX und Codeigniter

Antwort

Verwandte Themen