我正在为我的学校项目使用CodeIgniter和Bootstrap构建一个小型Web应用程序，目前，我正在尝试使用AJAX配置表单验证。我怀疑问题出在控制器上，但我无法弄清楚到底是什么。当我输入有效数据时，一切工作正常，但是当验证出错或所有字段均留空时，我将重定向到“ http://[::1]/appname/index.php/users/signup”，并看到以下消息：
{"title":"Sign up","messages":{"csrf_test_name":"","name":"
The Name field is required.<\/p>","email":"
The Email field is required.<\/p>","password":"
The Create password field is required.<\/p>","password2":""}}
另外，请注意，我已加载'form_validation'库和'autoload.php'文件中的'form'帮助程序。预先感谢！
这是我的“注册”表单视图（没有页眉和页脚，它们是模板化的）：
<div class="container">
<br>
<div class="text-center">
<h1 class="display-4">Create Account</h1>
</div>
<br>
<div class="row justify-content-md-center">
<div class="col-6 card bg-light">
<article class="card-body mx-auto">
<?php echo form_open('users/signup', array('id'=>'signup_form')); ?>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-user"></i> </span>
</div>
<input class="form-control" name="name" placeholder="Name" type="text">
</div> <!-- form-group// -->
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-envelope"></i> </span>
</div>
<input class="form-control" name="email" placeholder="Email" type="email">
</div> <!-- form-group// -->
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-lock"></i> </span>
</div>
<input class="form-control" name="password" placeholder="Create password" type="password">
</div> <!-- form-group// -->
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-lock"></i> </span>
</div>
<input class="form-control" name="password2" placeholder="Repeat password" type="password">
</div> <!-- form-group// -->
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block"> Create Account </button>
</div> <!-- form-group// -->
<p class="text-center">Have an account? <a href="login">Log In</a> </p>
<?php echo form_close(); ?>
</article>
</div> <!-- card.// -->
</div>
</div>
这是AJAX脚本：
<script type="text/javascript">
var sUrequest;
$("#signup_form").submit(function(e){
e.preventDefault();
if(sUrequest){
sUrequest.abort();
}
var inputs=$(this).find("input, select, button, textarea"),
serializedData=$(this).serialize(),
postURL=$(this).attr("action");
inputs.prop("disabled",true);
sUrequest=$.ajax({
url:postURL,
type:"post",
data:serializedData,
});
sUrequest.done(function(response,statusText,jqXHR){
$.each(response.messages, function(key, value) {
var element = $('#' + key);
element.closest('div.form-group input-group')
.removeClass('has-error')
.addClass(value.length > 0 ? 'has-error' : 'has-success')
.find('.text-danger')
.remove();
element.after(value);
});
});
sUrequest.fail(function(jqXHR,statusText,thrownError){
console.log("jq:"+jqXHR+" st:"+statusText+" te:"+thrownError);
});
sUrequest.always(function(){
inputs.prop("disabled",false);
});
});
</script>
这是“用户”控制器：
<?php
class Users extends CI_Controller {
# Register new user
public function signup() {
$data['title'] = 'Sign up';
array('success' => FALSE, 'messages' => array());
$this->form_validation->set_error_delimiters('<p class="text-danger">', '</p>');
$this->form_validation->set_rules('name', 'Name', 'required');
$this->form_validation->set_rules('email', 'Email', 'required|callback_check_email_exists');
$this->form_validation->set_rules('password', 'Create password', 'required');
$this->form_validation->set_rules('password2', 'Repeat password', 'matches[password]');
if($this->form_validation->run() === FALSE) {
// I am not sure if I need this commented part, since AJAX is supposed to perform all the actions without reloading the page.
// $this->load->view('templates/header');
// $this->load->view('pages/signup', $data);
// $this->load->view('templates/footer');
foreach ($_POST as $key => $value) {
$data['messages'][$key] = form_error($key);
}
}
else {
#Encrypting password
$hashed_password = password_hash($this->input->post('password'),PASSWORD_DEFAULT);
$this->user_model->signup($hashed_password);
#Setting a flash message
$this->session->set_flashdata('user_registered', 'You were successfully registered! You can now log in.');
redirect('../home');
}
echo json_encode($data);
}
# Check if the email is already taken.
public function check_email_exists($email) {
$this->form_validation->set_message('check_email_exists', 'There is a user registered with this email');
if ($this->user_model->check_email_exists($email)) {
return TRUE;
} else {
return FALSE;
}
}
}
这是我的用户模型：
<?php
class User_model extends CI_Model {
# Sign up user
public function signup($hashed_password) {
# User data array
$data = array (
'name' => $this->input->post('name'),
'email' => $this->input->post('email'),
'password' => $hashed_password
);
# Insert user in the database
return $this->db->insert('users', $data);
}
# Check if email is already taken
public function check_email_exists($email) {
$query = $this->db->get_where('users', array('email' => $email));
if (empty($query->row_array())) {
return TRUE;
} else {
return FALSE;
}
}
}
任何帮助将不胜感激。
答案 0 :(得分：0)
更新：我认为您遇到的主要问题是您没有将jquery包装在准备好的文档中！
JQUERY：
$(document).ready(function () {
var sUrequest;
$("#signup_form").submit(function (e) {
e.preventDefault();
if (sUrequest) {
sUrequest.abort();
}
var inputs = $(this).find("input, select, button, textarea"),
serializedData = $(this).serialize(),
postURL = $(this).attr("action");
inputs.prop("disabled", true);
sUrequest = $.ajax({
url: postURL,
type: "post",
data: serializedData,
dataType: 'json'
});
sUrequest.done(function (response, statusText, jqXHR) {
if (response.status == 'error') {
$.each(response.messages, function (key, value) {
var element = $('[name=' + key + ']');
element.closest('div.form-group input-group')
.removeClass('has-error')
.addClass(value.length > 0 ? 'has-error' : 'has-success')
.find('.text-danger')
.remove();
element.after(value);
});
} else {
window.location.href = response.url;
}
});
sUrequest.fail(function (jqXHR, statusText, thrownError) {
console.log("jq:" + jqXHR + " st:" + statusText + " te:" + thrownError);
});
sUrequest.always(function () {
inputs.prop("disabled", false);
});
});
});
注意：因为您的字段没有ID，所以我也很乐意修复您的错误消息。
PHP：
function signup() {
$data = array();
$this->form_validation->set_error_delimiters('<p class="text-danger">', '</p>');
$this->form_validation->set_rules('name', 'Name', 'required');
$this->form_validation->set_rules('email', 'Email', 'required|callback_check_email_exists');
$this->form_validation->set_rules('password', 'Create password', 'required');
$this->form_validation->set_rules('password2', 'Repeat password', 'matches[password]');
if (!$this->form_validation->run()) {
$data['status'] = 'error';
foreach ($_POST as $key => $value) {
$data['messages'][$key] = form_error($key);
}
} else {
$hashed_password = password_hash($this->input->post('password'), PASSWORD_DEFAULT);
$this->user_model->signup($hashed_password);
$this->session->set_flashdata('user_registered', 'You were successfully registered! You can now log in.');
$data['status'] = 'success';
$data['url'] = base_url() . 'home';
}
echo json_encode($data);
exit;
}
答案 1 :(得分：0)
仅通过在控制器中回显json_encode($data)，您并没有向客户端发出信号，即应将响应视为XHR响应。此时，您要做的就是加载视图以显示数据。
我们将使用output类（自动加载）通过Ajax返回响应。将echo json_encode($data)更改为：
$this->output
->set_header('HTTP/1.1 200 Ok)
->set_status_header(200)
->set_content_type('application/json')
->set_output(json_encode($data));
这正是您所需要的。
请注意，您要链接多个方法，因此无需用;终止每个方法...只需终止最后一个方法即可。
->set_output之后，控制器终止，因此之后将不执行任何操作