我正在尝试将 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 来告诉它登录已经成功了。请注意，我已将 ID 标签添加到 HTML 表单中，以通过 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>
这是我使用的 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。试试这个方法
您也不需要阻止默认设置。只需使用 return false
你的问题是你的控制器。您的ajax代码在控制器中调用
login()login()login()public function login($Variable_one, $Variable_two)