登录 AJAX 和 codeigniter

Posted

技术标签:

【中文标题】登录 AJAX 和 codeigniter【英文标题】:Login AJAX and codeigniter 【发布时间】:2017-05-21 14:25:04 【问题描述】:

我正在尝试将 AJAX 整合到我的工作中。我希望它在按下登录按钮后登录用户。下面是相关代码。 视图正在我的控制器中调用登录函数。

查看

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

【问题讨论】:

所以你想在点击提交按钮时插入关于你的用户的数据? 我理解它,因为他希望通过 AJAX 执行登录表单,而不是正常的 POST 请求和随后的页面更改。 ??? 我已经编辑了链接,也是的,这就是我想要做的 【参考方案1】:

您没有以任何方式修改 javascript 来向我们展示您的尝试。下面的代码应该可以将用户名和密码传递给登录控制器,但是您需要决定用户登录后要做什么。您还必须从登录控制器输出一些 JSON 来告诉它登录已经成功。注意,我在 html 表单中添加了 ID 标记,以通过 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>

【讨论】:

谢谢,我试了一下,但我得到的只是你的错误消息把床拉了起来。哈哈。如果有帮助,我将检查登录功能放在上面的 sn-p 中。【参考方案2】:
your problem is your controller:

您的 ajax 代码在您的控制器中调用 function login 并将两个变量传递给它,但您的 login function 没有得到它们,登录功能必须是这样的:

public function login($Variable_one,$Variable_two)

【讨论】:

【参考方案3】:

这是我使用的一种 ajax 形式的 sn-p。

$("#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,您使用的是 post。您不需要包含您的 post 方法或 URL 的长 URL,只需使用控制器和方法,Codeigniter 自己放入 base_url。试试这个方法

您也不需要阻止默认值。只需使用 return false

【讨论】:

以上是关于登录 AJAX 和 codeigniter的主要内容,如果未能解决你的问题,请参考以下文章

ajax登录和TP安全

使用 Phonegap、AJAX、PHP 和 mySQL 登录不工作

使用spring webMVC和spring security的ajax登录

登录/会话 cookie、Ajax 和安全性

django登录表单和表单验证在引导模式中使用ajax

ajax讲解:“创建用户”和“用户登录”练习