ログインAJAXとcodeigniter

私は自分の仕事にAJAXを組み込もうとしています。ログインボタンが押されたらユーザーをログインさせたい。以下は関連するコードです。ビューは私のコントローラのログイン機能を呼び出しています。ログインAJAXとcodeigniter

ビュー

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

コントローラ

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

私はそれが動作することはありませんしようとすると、しかし、それにAJAXを追加する必要があるしかしそれは完璧に動作します。どんな助けもありがとうございます。以下は、私が私の見解に入れようとしてきたものです。

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

出典

2017-01-06 ZeeSoft

送信ボタンをクリックしたときにあなたのユーザーに関するデータを挿入したいのですか？ –

通常のPOST要求とその後のページ変更ではなく、ログインフォームがAJAX経由で実行されるようにしたいと考えていました。 ??? – Juned

私はリンクを編集しました。また、私がやりたいことはあります。 – ZeeSoft

あなたは私達にあなたの試みを示すために、どのような方法でJavaScriptを変更していませんでした。以下のコードはユーザ名とパスワードをログインコントローラに渡すために働くはずですが、ユーザがログインしたら何をすべきかを決める必要があります。また、ログインコントローラからJSONを出力してログイン情報を伝える必要があります成功しています。注意すべきは、jQuery経由で入力値を選択するためにHTMLフォームにIDタグを追加しました。

あなたのコントローラで

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

出典

2017-01-06 19:24:19 Juned

ありがとう、私はそれを打ったが、私はすべてあなたのエラーメッセージがベッドを突っ込んだ。私は上記のスニペットにcheck login関数を置いてください。 – ZeeSoft

your problem is your controller:

あなたのAjaxコードの呼び出しfunction loginとそれへの2つの変数を渡すが、あなたのlogin functionがそれらを得ることはありません、ログイン機能は次のようにする必要があります。ここ

public function login($Variable_one,$Variable_two)

出典

2017-01-06 21:27:03 nima

はスニペットです私が使用するアヤックスフォームの1つ。

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

フォームデータをシリアル化します。あなたはjsonを使用していません、あなたは投稿を使用しています。ポストメソッドやURLの長いURLを含める必要はなく、コントローラとメソッドを使用するだけで、Codeigniterは単独でbase_urlに配置します。このように試してください

また、デフォルトを防ぐ必要はありません。ちょうど戻り偽を使用してください

出典

2017-01-07 16:23:51 Brad

答えて

関連する問題