Проблема
Здравствуйте, я хочу начать с надежды, что у всех вас есть фантазия c день! У меня действительно странная проблема, с которой я никогда не сталкивался. У меня есть bootstrap навигационная форма с двумя полями, вводом для электронной почты и полем для пароля.
Когда пользователь отправляет Форма это вызывает AddEventListener, который ждет нажатия кнопки входа в систему. и после этого вызывается (проверяет на стороне сервера) форму введенных данных. После того, как email_validated и password_validated оба равны true, он вызывает функцию checkLogin (электронная почта, пароль) {email = введенный адрес электронной почты в поле, пароль = введенный пароль в поле}. В функции checkLogin вызывается вызов JQuery $. ajax ({}), который отправляет поле электронной почты и пароль в документ php, расположенный в /scripts/checkLogin.php. Однако вместо возврата «Hello» (в целях тестирования) возвращается весь код HTML для текущей страницы (как показано выше)
JQuery $. ajax ({}) код
Здесь у меня есть код для вызова $. ajax ({}).
Консоль
Я не получаю никаких ошибок в консоли, кроме завершения загрузки XHR: POST
Другие рисунки
Вот некоторые другие рисунки, которые я включаю, чтобы, надеюсь, дать вам лучшее представление о структуре.
Примечание
Я просто хочу добавить, что я Я проверил Stackoverflow на наличие похожих проблем, и у других людей была эта проблема, но их решения не работали над моим кодом. Я также пытался использовать обычный XMLHttpRequest, и возникла та же проблема, я, честно говоря, не уверен, что не так с кодом, потому что у меня никогда не было этой проблемы раньше. Спасибо, что нашли время, чтобы прочитать это, я ценю любую помощь, которую я могу получить с решением этой проблемы. Я не лучший с $. ajax ({}) или XMLHttpRequest, и я готов внести любые изменения в код, чтобы попытаться заставить это работать. Ниже приведен мой код всей проверки javascript (на стороне сервера).
Код
<form class="form-inline my-2 my-lg-0" method="POST">
<input class="form-control mr-sm-2 nav-login" type="text" autocomplete="off" placeholder="Email" name="email" value="trest@gmail.com" id="email">
<input type="password" name="password" autocomplete="off" class="form-control nav-login mr-sm-2" placeholder="Password" value="password" name="password" id="password">
<button class="btn btn-success my-2 my-sm-0 nr" type="button" name="login_button" id="login_button">Login <i class="fas fa-sign-in-alt"></i></button>
</form>
<script>
document.getElementById('login_button').addEventListener('click', (e) => {
e.preventDefault();
// const email_regex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
let email_validated = true;
let password_validated = true;
let email = document.getElementById('email');
let password = document.getElementById('password');
// let email_length = email.value.length;
// let password_length = password.value.length;
//
//
// if(!email_length){
// email.classList.add('is-invalid');
// }else{
// if(!email_regex.test(email.value)){
// email.classList.add('is-invalid');
// }else{
// email.classList.remove('is-invalid');
// email.classList.add('is-valid');
// email_validated = true;
//
// }
// }
// if(!password_length){
// password.classList.add('is-invalid');
// }else{
// password.classList.remove('is-invalid');
// password.classList.add('is-valid');
// password_validated = true;
// }
if(email_validated === true && password_validated === true){
checkLogin(email.value, password.value);
}
});
function checkLogin(email, password){
$.ajax({
type: "POST",
url: '/scripts/checkLogin.php',
data: {
'email': email,
'password': password
},
contentType: "application/json; charset=utf-8",
success: (result) => {
alert(result);
}
});
}
</script>
Ссылки на другой вопрос StackOverFlow
ajax возвращает код html текущей страницы вместо json