Проверьте это похоже один: event.preventDefault doesn't seem to work
TLDR Ответ: Вы должны просто return false;, чтобы предотвратить представление PHP формы в функции обратного вызова для onSubmit события:
Для улучшения Код:
Пожалуйста, используйте правильный отступ для большей ясности и не стесняйтесь следить за комментариями по некоторым предложениям по улучшению;). Дайте мне знать, если вам нужны какие-либо дополнительные разъяснения :)
JQuery:
$(document).ready(function() {
$(".loginform").submit(function (event) {
// the proper way would be
//var username = $('input#username').val();
//var password = $('input#password').val();
var username = $('input[id=username]').val();
var password = $('input[id=password]').val();
$.ajax({
type: "POST",
url: "login.php",
//based on michael's post it should be
//data: {username: username, password: password},
data : "username="+username+"&password="+password,
//type: "POST", <-- not needed based on michael's post
success: function (data) {
var success = data['success'];
//probably needs to be success==="false" and I suggest
//not to use success name again in there..
if(success == false){
var error = data['message'];
alert(error);
}
// probably should be just else{ or else if(success==="true")
// I would check it first in the if because usually you will
// have a success more often than a failure
if(success == true) {
//based on Styphon's answer there is no write so it should be
//one of: append(element), prepend(element), text("content") or html("content")
$('#result').write('Login success! Loading dashboard...');
}
}
});
// return false is like calling event.preventDefault(); and event.stopPropagation().
//As such prevents redirection to PHP/Server code */ or in other words it WON'T
//submit the form to PHP using the name=" " input attributes
//and method=" "/action=" " attributes in your form tag
return false;
});
});
HTML
Если вы отправляете форму только через AJAX, а не по-старому, то только вы нужно, что у меня есть. Некоторые предложения:
- не используют
<br/> использовать позиционирование CSS
- в качестве альтернативы вы можете использовать
<button class="someclass">value</button> вместо <input type="submit"/> и в JavaScript вы могли бы сделать $("button.someclass").click(function(event){ blabla }) вместо $(".loginform").submit(function(event){blabla}); , но не забывайте return false;
<p>
Please log in:
<form class="loginform">
Username: <input id="username" /><br />
Password: <input id="password" /><br />
<input name="submit" type="submit" class="someclass" />
</form>
</p>
<p>
<div id="result">
</div>
</p>
PHP:
ВАЖНО: никогда не храните пароли в текстовом виде в вашей базе данных (например, для производства). Используйте некоторое хеширование (MD5/SHA-1) и сравните входные данные пользователя с тем, что он содержится в хэшировании базы данных (см. Подробности: How do I create and store md5 passwords in mysql). Btw даже этого не достаточно, и вы должны также использовать соления, прежде чем хэширования ..
например:
$hashedpass = hash('sha256', $pass);
$query = "select * from user where name = '$escapedName' and password = '$hashedpass'; ";
К сожалению PHP код здесь: –
Kaostherom
Правильно отредактируйте ваш вопрос и добавьте PHP-код. – Styphon