我正在使用类似的代码登录表单,它工作正常。如果缺少某些字段,服务器将返回相同的错误。 POST http://localhost:3000/signup/local 400 (Bad Request)
。但是,我的注册表单的ajax没有检测到它。
的Ajax:
$('#signup_form').submit(function (event) {
$('#signup_processing_message').show();
event.preventDefault();
var fieldValues = getFormObj('signup_form');
$.ajax({
type: 'post',
url: '/signup/local',
data: fieldValues,
success: function (response, textStatus, xhr) {
if (xhr.readyState === 4 && xhr.status === 0) {
alert('Aborted. Network issue.');
} else if (response.message === 'success') {
if ($('#signup_error_message').is(':visible')) {
$('#signup_error_message').hide();
}
$('#signup_processing_message').html('Success');
setTimeout(function (){ window.location.href = '/'; }, 500);
} else {
// Could this ever happen?
}
},
error: function (response) {
console.log(response);
if ($('#signup_processing_message').is(':visible')) {
$('#signup_processing_message').hide();
}
if (response.status === 400) {
$('#signup_error_message').html('Please fill in the fields correctly.');
} else {
$('#signup_error_message').html('Please fill in the fields correctly.');
}
$('#signup_error_message').show();
}
});
});
function getFormObj(formId) {
var formObj = {};
var inputs = $('#' + formId).serializeArray();
$.each(inputs, function (i, input) {
formObj[input.name] = input.value;
});
return formObj;
};
HTML
<div class="row">
<div class="col-md-4 col-md-offset-4">
<h1 class="text-center">SIGNUP</h1>
<div class="well">
<form role="form" id="signup_form">
<div class="form-group">
<input type="text" class="form-control" id="signup_name" name="fullName" placeholder="Full Name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="signup_email" name="username" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="signup_password" name="password" placeholder="Password">
</div>
<button type="submit" class="btn btn-default btn-block">Signup</button>
<div id="signup_error_message" class="alert alert-danger"></div>
<div id="signup_processing_message" class="alert alert-success">Processing...</div>
</form>
</div>
<p class="help-block text-center"><span class="glyphicon glyphicon-lock"></span> SSL Secure</p>
</div>
</div>
我们可以清楚地看到客户端正在接收400代码:http://screencast.com/t/uGxt8uMyOm
但是,根本不会调用错误函数。