Ajax-вызов на Submmit не работает
У меня есть форма для входа. Прежде чем войти в систему, я хотел бы убедиться, что имя пользователя и пароль верны .. Я пытаюсь добиться этого с помощью ajax, но пока он не работает ..
в своей форме я вызываю функцию check_user onSubmit.
Это мой код
Редакция:
function check_user(){
var username = $('#username').val();
var password = $('#password').val();
if(username.length>1 && password.length>1){
jQuery.ajax({
type : "POST",
url : "Something/check_user_exists.php",
data : {'username':username, 'password':password},
cache : false,
success : function(response) {
if (response == 1) {
alert ('true');
return true;
} else {
alert('false'); //this happens and goes to login.php
$('#username').css('border', '2px red solid');
document.getElementById("username").placeholder = "Wrong username or password";
$('#password').css('border', '2px red solid');
document.getElementById("password").placeholder = "Wrong username or password";
return false;
}
}
});
}else{
//when this happens it stays on the page
$('#username').css('border', '2px red solid');
document.getElementById("username").placeholder = "Wrong username or password";
$('#password').css('border', '2px red solid');
document.getElementById("password").placeholder = "Wrong username or password";
return false;
}
}
В моем PHP-файле check_user_exists.php у меня также есть этот код:
$fp = fopen("debug.txt", "a") or die("Couldn't open log file for writing.");
fwrite($fp, PHP_EOL ."inside");
fflush($fp);
fclose($fp);
NEW: Файл debug.txt создан. Но только когда я использую Chrome. С Firefox не создается, поэтому я думаю, в Firefox ajax не работает?
Моя форма:
<form name="login_form" action="Something/login.php" method="post" onsubmit="return check_user(this);">
Решение
Вы можете открыть отладку сети Chrome, чтобы узнать, вызывается ли ajax.
Отладка асинхронного JavaScript с помощью Chrome DevTools
Также в следующей строке вам может потребоваться косая черта перед именем файла
url : "/check_user.php",
Другие решения
Это не верно
data : 'username=' + username +"&password=" + password,
Это было бы
data : {username:username,password:password},
Вам нужно добавить e.preventDefault() на вашей форме действий.
$("#formID").on("submit", function(e){
e.preventDefault();
check_user();
});
Можете ли вы попробовать это и сказать мне, что будет ошибка? если есть!
;(function(){
function check_user(){
var username = $('#username').val();
var password = $('#password').val();
if(username != '' && password != ''){
$.ajax({
type : 'POST', // or the method
url: "check_user.php",
data: $('form').serialize(),
beforeSend: function( xhr ) {
},
error: function(data){
//handle errors from server
},
success : function(data){
//handle success data from server
}
})
.done(function( data ) {
if ( console && console.log ) {
// handle anything else after Ajax finishes the request
//console.log( data );
}
});
}else{
// output validation error
alert('please type username and password');
}
};
})();
Это неправильный формат:
data : 'username=' + username +"&password=" + password,
так должно быть
data : {'username':username, 'password':password},
добавить e.preventDefault(); на первой строке в начале вашей функции
предложение: в вашем chrome или другом браузере нажмите F12, зайдите в сети и посмотрите, действительно ли идет запрос ajax, если он идет, то какой ответ вы получите.
Отредактировано:
Вы забыли передать ссылку на форму в параметре функции, это была ошибка, ниже мой рабочий код:
<script>
function check_user(e){
e.preventDefault();
alert('yes');
var username = $('#username').val();
var password = $('#password').val();
if(username.length>1 && password.length>1){
e.preventDefault(); // I added this but still it is not working
alert('alive'); // this is working
jQuery.ajax({
type : "POST",
url : "check_user.php",
data : 'username=' + username +"&password=" + password,
cache : false,
success : function(response) {
if (response == 1) {
return true;
} else {
$('#username').css('border', '2px red solid');
document.getElementById("username").placeholder = "Wrong username or password";
$('#password').css('border', '2px red solid');
document.getElementById("password").placeholder = "Wrong username or password";
return false;
}
}
});
}else{
//this is working
$('#username').css('border', '2px red solid');
document.getElementById("username").placeholder = "Wrong username or password";
$('#password').css('border', '2px red solid');
document.getElementById("password").placeholder = "Wrong username or password";
return false;
}
}
</script>
<body>
<form name="login" id="contactForm" action="Something/login.php" method="post" onSubmit="return check_user(this);">
<input type = "submit" value="submit" />
</form>
</body>
Вы пробовали с
асинхронный: ложный,