登录 AJAX 和代码点火器

我正在尝试将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();
  });

你没有以任何方式修改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>

your problem is your controller:

你的 ajax 代码调用function login在你的控制器中并传递给它两个变量，但你的login function没有得到它们，登录函数必须是这样的：

public function login($Variable_one,$Variable_two)

这是我使用的一个 ajax 表单的片段。

$("#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。试试这种方式

您也不需要阻止默认值。只需使用返回假

相关内容

最新更新

热门标签：